Sign in Get started

HTML Tutorial · HTML5 Features · Lesson 24 of 34

HTML Details and Summary

Create accordions and disclosure widgets with <details> and <summary>, keyboard-accessible with no JavaScript.

A built-in disclosure widget

<details> hides its content until the user opens it; <summary> is the clickable heading. It works with mouse, keyboard and screen readers without any script.

A simple FAQTry it yourself
<details>
  <summary>What is your refund policy?</summary>
  <p>You can return any item within 30 days for a full refund.</p>
</details>
<details open>
  <summary>How long does shipping take?</summary>
  <p>Orders arrive in 2 to 4 working days.</p>
</details>
  • Add open to start expanded.
  • The toggle event fires when it opens or closes.
  • Browsers can find text inside closed <details> with Find in page and open it automatically.

Exclusive accordions with name

Give several <details> the same name and only one can be open at a time:

An accordion where only one panel is openTry it yourself
<style>
  details { border: 1px solid #ddd; border-radius: 6px; padding: .5rem 1rem; margin-bottom: .5rem; }
  summary { cursor: pointer; font-weight: 600; }
</style>
<details name="plan" open><summary>Basic</summary><p>1 project, community support.</p></details>
<details name="plan"><summary>Pro</summary><p>Unlimited projects, email support.</p></details>
<details name="plan"><summary>Enterprise</summary><p>SSO, audit logs, a dedicated manager.</p></details>

When to use it

FAQs, "show more" sections, filters and settings panels. Don't hide content that most users need to see.

Test yourself

How do you make a group of <details> elements behave as an accordion where only one is open?

  1. Wrap them in a <menu>
  2. Give them the same name attribute
  3. Add role="accordion"
  4. Use JavaScript only; HTML can't do it
Show answer

Answer: Give them the same name attribute

details elements that share a name form an exclusive group.