Components

FAQ Accordion

A native <details>/<summary> accordion — no JavaScript required, works with the browser's own disclosure behavior.

Markup

<details class="faq">
  <summary>
    <span class="q">What does it cost to find out what&rsquo;s wrong?</span>
    <span class="mk" aria-hidden="true">+</span>
  </summary>
  <div class="a">An $89 service call covers the trip and the diagnosis.</div>
</details>

Because this is the browser's native <details> element, no JavaScript is involved at all — expand/collapse, keyboard operability, and screen-reader state announcement all come from the element itself. The .mk plus/minus glyph is pure CSS: a + generated by default, switched to a minus sign via the [open] attribute selector.

Grouping

Wrap a set of related questions in .faq-group with its own .kicker label — used on the dedicated FAQ page to split questions into topics (pricing, scheduling, service area). A single ungrouped block of .faq items (no wrapping .faq-group) works too, as used on the Contact and Pricing pages' shorter inline FAQs.

<div class="faq-group">
  <span class="kicker">PRICING</span>
  <details class="faq">…</details>
  <details class="faq">…</details>
</div>

Dark skin

Add .faq-dark alongside .faq to use the accordion on a dark/iron section instead of the default paper skin — recoloring the plus/minus glyph and open-state question color to amber.

<details class="faq faq-dark">…</details>