FAQ
Multi-Open Accordion
An accordion where any number of answers can stay open at once.
#accordion#faq#multiple
6 frameworksIntermediate
Loading…
An accessible accordion where one answer opens at a time.
<!--
<details name="faq"> gives an exclusive accordion natively: keyboard operable,
screen-reader announced, and open by default for print and no-JS.
-->
<div class="faq">
<h2 class="faq__heading">Frequently asked questions</h2>
<details class="faq__item" name="faq" open>
<summary class="faq__question">
Can I change my plan later?
<svg class="faq__icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="m5 7.5 5 5 5-5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</summary>
<div class="faq__answer">
<p>Yes. Upgrades apply immediately and downgrades take effect at the end of the current billing period.</p>
</div>
</details>
<details class="faq__item" name="faq">
<summary class="faq__question">
Do you offer refunds?
<svg class="faq__icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="m5 7.5 5 5 5-5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</summary>
<div class="faq__answer">
<p>We refund any annual plan in full within 30 days of purchase, no questions asked.</p>
</div>
</details>
<details class="faq__item" name="faq">
<summary class="faq__question">
Is there a free tier?
<svg class="faq__icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="m5 7.5 5 5 5-5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</summary>
<div class="faq__answer">
<p>Yes - the free tier includes three projects and never expires. No card required.</p>
</div>
</details>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | FaqItem[] | - | The array of items to render. |
allowMultiple | boolean | false | Allows more than one item open at once. |
defaultOpenId | string | - | Id of the item expanded on mount. |
className | string | - | Additional classes merged onto the root element. |
Feed it an array of question/answer pairs. Keep the `aria-expanded` and `aria-controls` wiring intact - it is what makes the control announce correctly to a screen reader.