Featured
FAQFAQ Accordion
An accessible accordion where one answer opens at a time.
#faq#accordion#disclosure
6 frameworksIntermediate
Loading…
An accordion whose + indicator morphs into a − as the panel opens.
<!--
The indicator is two 2px bars stacked at the same spot: the horizontal one is
always visible, the vertical one collapses (scaleY(0)) when the panel opens,
so + morphs into −. Both bars are aria-hidden - aria-expanded on the control
is what a screen reader announces.
-->
<div class="acc-pm">
<details class="acc-pm__item" name="acc-pm" open>
<summary class="acc-pm__question">
Is there a free trial?
<span class="acc-pm__indicator" aria-hidden="true">
<span class="acc-pm__bar"></span>
<span class="acc-pm__bar acc-pm__bar--vertical"></span>
</span>
</summary>
<div class="acc-pm__answer">
<p>14 days on any paid plan, no card required. You keep everything you build during the trial.</p>
</div>
</details>
<details class="acc-pm__item" name="acc-pm">
<summary class="acc-pm__question">
What happens when the trial ends?
<span class="acc-pm__indicator" aria-hidden="true">
<span class="acc-pm__bar"></span>
<span class="acc-pm__bar acc-pm__bar--vertical"></span>
</span>
</summary>
<div class="acc-pm__answer">
<p>Your workspace drops to the free tier. Nothing is deleted, and you can upgrade again whenever you like.</p>
</div>
</details>
<details class="acc-pm__item" name="acc-pm">
<summary class="acc-pm__question">
Can I extend my trial?
<span class="acc-pm__indicator" aria-hidden="true">
<span class="acc-pm__bar"></span>
<span class="acc-pm__bar acc-pm__bar--vertical"></span>
</span>
</summary>
<div class="acc-pm__answer">
<p>Email support and we will add another 14 days once, no questions asked.</p>
</div>
</details>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | FaqItem[] | - | The array of items to render. |
defaultOpenId | string | - | Id of the item expanded on mount. |
className | string | - | Additional classes merged onto the root element. |
The indicator is two bars stacked at the same point: the horizontal one is always visible and the vertical one collapses with `scale-x-0`, so + becomes − with a single transform and no icon swap. Both bars are `aria-hidden` - `aria-expanded` on the button is what a screen reader announces, so the glyph is pure decoration. The transition is disabled under `prefers-reduced-motion`, leaving the state change instant but still visible.