Patterns / accordion

accordion

Tier 1

details + summary. Exclusivity, keyboard, and semantics are the browser's — the shared name attribute does the grouping.

Is it accessible?

Yes. It is a native disclosure element; AT support comes with it.

Is it styled?

Border-per-item, rotating chevron, hover underline — the shadcn look.

Is it animated?

Height eases via interpolate-size where supported; instant elsewhere.

<details name="faq">
  <summary>Is it accessible?</summary>
  <p>Yes.</p>
</details>
<details name="faq">
  <summary>Is it styled?</summary>
  <p>Also yes.</p>
</details>

Notes

Omit name for independent disclosures. The open/close animation uses ::details-content + interpolate-size: allow-keywords (set in the preset) — browsers without it open instantly. Zero JS either way.