Accordion with details and summary
A keyboard-accessible FAQ accordion with no JavaScript, including an exclusive group using the name attribute.
- HTML
- GreenSnippets
- MIT
<section aria-labelledby="faq-title">
<h2 id="faq-title">Frequently asked questions</h2>
<details name="faq" open>
<summary>What is included in the free plan?</summary>
<p>Up to three projects and community support.</p>
</details>
<details name="faq">
<summary>Can I cancel at any time?</summary>
<p>Yes. You keep access until the end of the billing period.</p>
</details>
</section>Example / expected output
<!-- Style the marker with summary::marker or summary { list-style: none; } -->How it works
<details> and <summary> provide an expand/collapse widget that works with keyboard and screen readers. Giving several <details> the same name makes them exclusive: opening one closes the others (supported in current browsers; older ones simply allow several open).
This snippet has been reviewed but was not executed by an automated test. Test it in your own environment before relying on it.
Related snippets
- CSS
Respect prefers-reduced-motion
Turn off or shorten animations for users who ask their system for less motion.
- CSS
Accessible focus ring with :focus-visible
Show a clear focus outline for keyboard users without drawing it on mouse clicks.
- HTML
Accessible modal with the dialog element
Use the native dialog element for a modal with built-in focus trapping, Escape to close and a backdrop.
- CSS
Accessible button styles with states
A base button with hover, active, disabled and focus styles that meets minimum target size.