Details & Summary
<details> and <summary> create a disclosure widget — a section that expands and collapses when clicked. They're perfect for FAQs, "show more" content, settings panels and accordions, and they work with no JavaScript at all.
A basic disclosure
The <summary> is always visible and acts as the toggle; everything else inside <details> is hidden until it's opened. It's keyboard-accessible (Tab to it, Enter or Space to toggle) and screen readers announce whether it's expanded or collapsed.
Open by default
The boolean open attribute shows the content initially. It's added and removed automatically as users toggle the element.
An FAQ
Exclusive accordions
Give several <details> elements the same name, and only one can be open at a time — opening one closes the others:
Styling the marker
The [open] attribute selector styles the expanded state. In supporting browsers, the ::details-content pseudo-element can even animate the opening.
Listening for changes
Searchable hidden content
Browsers' find-in-page (Ctrl+F) can search text inside closed <details> and automatically open the right one — something most JavaScript accordions don't manage. The same goes for hidden="until-found", which hides content but keeps it findable.
When not to use details
- Don't hide essential information users need to complete a task.
- For tabs, menus or modal content, use the appropriate pattern (popovers, dialogs, or a tabs component).
- Keep the summary short and descriptive — it's what people scan.