Featured
FAQFAQ Accordion
An accessible accordion where one answer opens at a time.
#faq#accordion#disclosure
6 frameworksIntermediate
Loading…
An exclusive accordion built on `<details name>` with no JavaScript at all.
<!--
Zero JavaScript. <details name="faq-native"> makes the group exclusive the way
a radio group is: the browser closes the open panel for you. Everything the
ARIA disclosure pattern hand-builds - the expanded state, the keyboard
handling, the screen-reader announcement - is already in the element.
It ships open by default for no-JS, print and search-engine crawlers.
-->
<div class="acc-native">
<details class="acc-native__item" name="faq-native" open>
<summary class="acc-native__question">
Do you sell my data?
<svg class="acc-native__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-native__answer">
<p>Never. We make money from subscriptions, and your content is yours - we do not sell or train on it.</p>
</div>
</details>
<details class="acc-native__item" name="faq-native">
<summary class="acc-native__question">
Are you GDPR compliant?
<svg class="acc-native__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-native__answer">
<p>Yes, and we sign a DPA with every customer. Sub-processors are listed publicly on our trust page.</p>
</div>
</details>
<details class="acc-native__item" name="faq-native">
<summary class="acc-native__question">
How do I delete my account?
<svg class="acc-native__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-native__answer">
<p>Settings → Account → Delete. Everything is erased from live systems immediately and from backups within 30 days.</p>
</div>
</details>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | FaqItem[] | - | The array of items to render. |
name | string | 'faq-native' | Scopes the exclusive group. Pass a unique value per accordion on a page. |
defaultOpenId | string | - | Id of the item expanded on mount. |
className | string | - | Additional classes merged onto the root element. |
Everything the ARIA disclosure pattern hand-builds - the expanded state, keyboard handling, the screen-reader announcement - is already in `<details>`; `name` makes the group exclusive the way it does for radio buttons, and the browser closes the open panel for you. Pass a unique `name` when two accordions share a page or they will close each other. The Next.js tab is deliberately not a client component: with no state to hydrate it renders on the server and ships zero JavaScript. Reach for the JS accordion instead only when the open state has to be controlled from outside.