Toggle and accordion

An accordion reveals or hides related content. Start with the native HTML elements when their behavior fits your design.

What you will learn

How details and summary provide keyboard-friendly disclosure
When a custom JavaScript toggle is necessary
How to keep hidden content understandable

Native solution

<details>
  <summary>What is an accordion?</summary>
  <p>It reveals one section of related content.</p>
</details>

The browser supplies the toggle interaction and keyboard behavior. Use clear summary text and do not hide information users need to complete a task.

Common mistakes

Do not make the control look clickable without making it keyboard accessible.
Do not use display: none when content should remain available after expansion.
Consider whether several sections should be open at the same time.