# Smooth FAQ accordion (`faq-accordion`)

Native <details> FAQ that glides open and shut: pure CSS where the browser can animate to height:auto, a 1 KB Web Animations fallback elsewhere, one-open-at-a-time groups, and FAQPage schema from the page.

| | |
|---|---|
| Tag | Flow |
| Size | 2.0 KB gzipped own code (JS 1.1 KB + CSS 0.9 KB; 4.2 KB raw) |
| Dependency | none (vanilla + native APIs) |
| Best for | Every FAQ, price notes, policies (cancellations, deposits), service details |
| Demo | `index.html` in this folder (live: https://wbl-code-lib.pages.dev/modules/faq-accordion/) |

## What it does
Questions are <details>/<summary>, so they work without JS, open with Enter/Space and are found by find-in-page. In Chrome/Edge 131+ CSS animates ::details-content to block-size: auto (interpolate-size) and the script does nothing. Elsewhere the script glides the answer height with WAAPI, closing siblings in the same name group smoothly. data-schema writes FAQPage JSON-LD from the questions and answers on the page (only matching visible text, which is what Google requires).

## When to use
- Any FAQ; the split variant (.wbl-faq--split) on desktop.
- Real questions from reviews and calls (parking, walk-ins, deposits).

## Don't
- Hide prices or anything a visitor needs to decide (skill rule).
- More than ~8 questions.
- Add the schema if the same FAQ schema is already server-rendered.

## Reduced motion, no JS, accessibility
- Reduced motion: opens instantly; the + doesn't spin.
- No JS: native details (instant).
- Summary is the button (native role, focus ring); 56 px rows.

## Notes
- The answer height animation is the one non-transform animation in the library: it's user-initiated, so it never counts as layout shift.

## Relation to the effects libraries
Batch 1 has an accordion effect (JS glide). This one is CSS-first with interpolate-size, native exclusive groups and schema output; use it going forward.

## Use it
Copy this folder to the site as `/wbl/faq-accordion/` (keep `vendor/` if there is one), then:

```html
<!-- Smooth FAQ accordion (WBL Code Library) -->
<!-- in <head>: -->
<script>document.documentElement.classList.add('wbl-js')</script>
<link rel="stylesheet" href="/wbl/faq-accordion/module.css">
<script src="/wbl/faq-accordion/module.js" defer></script>

<!-- markup: -->
<div class="wbl-faq" data-wbl="faq" data-schema>
  <details name="faq"><summary>Do you take walk-ins?</summary>
    <div class="wbl-faq-a"><p>Yes, Tuesday to Sunday, until 30 minutes before close. Saturdays fill by noon, so book ahead if you can.</p></div></details>
  <details name="faq"><summary>How much is colour?</summary>
    <div class="wbl-faq-a"><p>Root touch-up is $85 and a gloss is $55. Balayage and vivids start at $220 and $180; we do a strand test and tell you the price before we mix anything.</p></div></details>
  <details name="faq"><summary>Can I bring my kids?</summary>
    <div class="wbl-faq-a"><p>Of course. Kids cuts (under 12) are $30 and take about 30 minutes.</p></div></details>
  <details name="faq"><summary>Where do I park?</summary>
    <div class="wbl-faq-a"><p>Street parking on Lemoyne St, right around the corner. The meters on Sunset are free after 8 pm and on Sundays.</p></div></details>
</div>
```

Colours come from CSS variables with safe defaults: `--wbl-accent`, `--wbl-on-accent`, `--wbl-ink`, `--wbl-paper`,
`--wbl-card`, `--wbl-line`, `--wbl-muted`, `--wbl-band`, `--wbl-radius`, `--wbl-head` (see the library README for the
one-line bridge to the preview builder's `--a / --ink / --bg …`).

## License
Our code: WBL-owned, original. No third-party code.