<details> Disclosure widget
A box that expands and collapses to reveal more content, with no JavaScript.
<details> builds a disclosure widget. Only its <summary> shows until the user clicks it, and then the rest appears. Keyboards and screen readers work with it, and it needs no script.
Add open to start expanded. Give several details elements the same name and they form an exclusive accordion, where opening one closes the others. FAQs and optional extra information suit it well. Content that every reader needs should stay out of it.
The open attribute, and the name attribute for exclusive accordions, are covered in the details element in the HTML Living Standard (opens in a new tab). Its visible label is the summary element.
Syntax
<details>
<summary>Label</summary>
<p>Hidden content</p>
</details>When to use it
Some readers want the shipping and returns policy, the technical specs, the worked solution under an exercise or the spoiler. Others skip them. Put that content in <details>. The page stays short, and the text is still in the HTML for search engines and find-in-page.
A question that must be answered before the user continues needs a dialog. Details is no modal. It is no tab set either, where exactly one panel shows and the tabs sit in a row. Exclusive accordions with the name attribute get close. They also stop readers from opening two answers to compare them, so only use them where one at a time actually helps.
Plenty of sites use details as a dropdown menu. It stays open until someone clicks the summary again, and clicking elsewhere, pressing Esc or tabbing on to another link leaves it open. If a menu should close by itself, build it with a popover.
Attributes
| Attribute | What it does |
|---|---|
open | Starts expanded. |
name | Details with the same name form an accordion: only one opens at a time. |
Live example
Edit the code and watch the preview.
<details name="faq" open>
<summary>What is HTML?</summary>
<p>The language that structures web pages.</p>
</details>
<details name="faq">
<summary>What is CSS?</summary>
<p>The language that styles web pages.</p>
</details>More examples
Product page extras
The backpack description stays visible. Shipping details and specs are tucked into two details boxes. Inside the specs box is a small table, since details can contain any flow content and is not limited to text.
<h2>Canvas backpack</h2>
<p>A light 20-litre backpack for city and trail.</p>
<details>
<summary>Shipping and returns</summary>
<p>Free delivery in 3 to 5 days. Return within 30 days.</p>
</details>
<details>
<summary>Specifications</summary>
<table>
<tr><th scope="row">Weight</th><td>650 g</td></tr>
<tr><th scope="row">Size</th><td>45 x 30 x 15 cm</td></tr>
</table>
</details>Hidden exercise solution
Learners attempt the exercise and open the solution when they are ready. A second details nested inside offers a follow-up note. Yes, disclosure widgets can sit inside each other.
<p>Exercise: make the word <em>important</em> bold and meaningful.</p>
<details>
<summary>Show the solution</summary>
<p>Use the strong element: <code><strong>important</strong></code></p>
<details>
<summary>Why not b?</summary>
<p>b only changes the look; strong also marks the importance.</p>
</details>
</details>Tip: Share one name across details to keep one item open at a time.
Browser support
All current browsers support details and summary, which are in the HTML Living Standard (details and summary support (opens in a new tab)).
The name attribute for exclusive accordions came later and reached every major browser during 2024. Older versions let several items open at once, which is a harmless fallback (details name support (opens in a new tab)).
Accessibility
details and summary handle the keyboard and announce their expanded state without extra code, which puts them ahead of custom div accordions. The W3C disclosure pattern (opens in a new tab) describes the expected behaviour.
Common mistakes
Wrong
<details>
<p>Answer text</p>
<summary>Question</summary>
</details>Right
<details>
<summary>Question</summary>
<p>Answer text</p>
</details>details needs summary as its first child.
Frequently asked questions
How do I make an accordion with HTML only?
Stack several <details> elements, each with a <summary> as the first child. Give them all the same name attribute and the browser keeps only one open at a time, an exclusive accordion with no JavaScript. Every current major browser supports name on details.
Is content inside a closed details element searchable?
In Chrome and Edge, yes: find-in-page searches the hidden content and opens the details element when it finds a match. Firefox and Safari have been adding support. Search engines index content inside details as well. Even so, keep the most important information outside collapsed sections so everyone sees it right away. Can I use (opens in a new tab) tracks browser support.