Featured
FAQFAQ Accordion
An accessible accordion where one answer opens at a time.
#faq#accordion#disclosure
6 frameworksIntermediate
Loading…
An accordion inside an accordion panel, with the heading levels kept correct.
<!--
An accordion inside an accordion panel. The heading levels are the thing to
get right: outer questions sit in <h3>, inner ones in <h4>, so the document
outline nests the same way the boxes do and a screen reader's heading list
stays navigable. Skipping a level (h3 → h5) breaks that.
-->
<div class="acc-nest">
<details class="acc-nest__item" name="acc-nest" open>
<summary class="acc-nest__question">
<h3 class="acc-nest__label">Billing</h3>
<svg class="acc-nest__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-nest__panel">
<details class="acc-nest__child" name="acc-nest-billing" open>
<summary class="acc-nest__question acc-nest__question--child">
<h4 class="acc-nest__label acc-nest__label--child">Do prices include VAT?</h4>
<svg class="acc-nest__icon acc-nest__icon--child" 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-nest__answer">
<p>Prices are shown excluding VAT. The correct rate is added at checkout based on your billing country.</p>
</div>
</details>
<details class="acc-nest__child" name="acc-nest-billing">
<summary class="acc-nest__question acc-nest__question--child">
<h4 class="acc-nest__label acc-nest__label--child">Can I pay by invoice?</h4>
<svg class="acc-nest__icon acc-nest__icon--child" 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-nest__answer">
<p>Annual plans over ten seats can be invoiced on net-30 terms. Contact sales to switch.</p>
</div>
</details>
</div>
</details>
<details class="acc-nest__item" name="acc-nest">
<summary class="acc-nest__question">
<h3 class="acc-nest__label">Security</h3>
<svg class="acc-nest__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-nest__panel">
<details class="acc-nest__child" name="acc-nest-security">
<summary class="acc-nest__question acc-nest__question--child">
<h4 class="acc-nest__label acc-nest__label--child">Is data encrypted at rest?</h4>
<svg class="acc-nest__icon acc-nest__icon--child" 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-nest__answer">
<p>Yes - AES-256 at rest and TLS 1.3 in transit, with keys rotated automatically every 90 days.</p>
</div>
</details>
</div>
</details>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | NestedFaqItem[] | - | 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 heading ranks are the part to get right: outer questions sit in `<h3>` and inner ones in `<h4>`, so the document outline nests the same way the boxes do and a screen reader’s heading list stays navigable. Skipping a rank (h3 → h5) breaks that even though it looks identical. Outer and inner open state are tracked separately, so collapsing a section does not lose the child a user had open. Two levels is the practical limit - deeper nesting is a sign the content wants its own page.