Français

<details>

Show or hide content, without a single line of JavaScript

— 1 min read

  • HTML
  • accessibility
  • semantics
  • interactions

<details> + <summary> — The collapsible panel

The <details> element creates a collapsible disclosure widget. The <summary> is the always-visible label. The rest of the content is hidden by default and appears when the user opens the panel. No JavaScript required.

When to use it

You want to display a FAQ, supplementary notes, advanced settings, or any secondary content the user can choose to reveal or hide.

What you gain

Accessibility: the browser handles focus, open/closed state, and screen reader announcements natively. No need to reinvent a disclosure with ARIA.

Code example

<details>
  <summary>How do I reset my password?</summary>
  <p>Go to the login page and click "Forgot password". You will receive an email with a reset link.</p>
</details>
 
<details open>
  <summary>What payment methods do you accept?</summary>
  <p>We accept credit cards, PayPal, and bank transfers.</p>
</details>

Further reading