Accordion with <details>

Use <details> and <summary> for collapsible sections without JavaScript.

When to use

For FAQs, disclosure widgets, or simple accordions.

Where it works best

Accessible by default, keyboard-friendly, and supported in modern browsers.

How to use

Wrap content in <details> and provide a <summary> as the clickable heading.

Code Example


<details>
  <summary>When to use</summary>
  <p>For FAQs, disclosure widgets, or simple accordions.</p>
</details>