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.
Questions
Split layout from 900 px (Mobbin: Amigo), so the FAQ never floats alone in a wide band.
Do you take walk-ins?
Yes, Tuesday to Sunday, until 30 minutes before close. Saturdays fill by noon, so book ahead if you can.
How much is colour?
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.
Can I bring my kids?
Of course. Kids cuts (under 12) are $30 and take about 30 minutes.
Where do I park?
Street parking on Lemoyne St, right around the corner. The meters on Sunset are free after 8 pm and on Sundays.
One open at a time (native name groups). Ctrl/Cmd+F finds text inside closed answers and opens them.
Every FAQ, price notes, policies (cancellations, deposits), service details
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.
Copy-ready snippet
<!-- 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>