精选
FAQFAQ Accordion
An accessible accordion where one answer opens at a time.
#faq#accordion#disclosure
6 个框架中级
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 | 类型 | 默认值 | 说明 |
|---|---|---|---|
items必填 | FaqItem[] | - | 要渲染的项目数组。 |
name | string | 'faq-native' | 限定互斥分组的范围。页面上每个手风琴请传入唯一值。 |
defaultOpenId | string | - | 挂载时默认展开项的 id。 |
className | string | - | 合并到根元素上的额外类名。 |
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.