Featured
FAQFAQ Accordion
An accessible accordion where one answer opens at a time.
#faq#accordion#disclosure
6 frameworksIntermediate
Loading…
An accordion where any number of answers can stay open at once.
<!--
Multi-open: plain <details> elements with NO shared name attribute are
independent, so opening one never closes another. The exclusive single-open
behaviour is what <details name="…"> opts into - leaving it off is the whole
difference. Expand all / Collapse all is a JS affordance; see the React tabs.
-->
<div class="acc-multi">
<details class="acc-multi__item" open>
<summary class="acc-multi__question">
How long does delivery take?
<svg class="acc-multi__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="acc-multi__answer">
<p>Standard delivery arrives in 3-5 working days. Express orders placed before 2pm ship the same day.</p>
</div>
</details>
<details class="acc-multi__item" open>
<summary class="acc-multi__question">
Can I track my order?
<svg class="acc-multi__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="acc-multi__answer">
<p>Every shipment gets a tracking link by email the moment it leaves our warehouse.</p>
</div>
</details>
<details class="acc-multi__item">
<summary class="acc-multi__question">
What is your returns window?
<svg class="acc-multi__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="acc-multi__answer">
<p>Send anything back within 60 days of delivery and we cover the return postage.</p>
</div>
</details>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | FaqItem[] | - | The array of items to render. |
defaultOpenIds | string[] | [] | Ids of the items expanded on mount. |
className | string | - | Additional classes merged onto the root element. |
The opposite trade-off to the single-open accordion: nothing collapses behind the user, so answers can be compared side by side, at the cost of a page that grows as they read. Prefer it when questions are short or related. The React tabs track a `Set` of open ids and add an Expand all / Collapse all control; the HTML tabs get the same behaviour for free by omitting the `name` attribute from `<details>` - that attribute is what makes a group exclusive.