The <details> & <summary> elements
The <details> tag creates a section that readers can open and close, with no JavaScript needed. Its first child, <summary>, is the always-visible label they click, and everything after it is hidden until the section is opened. It is the simplest way to build FAQs, “read more” panels and accordions, and works with the keyboard and screen readers.
Last updated: October 3, 2026
Quick facts
| Category | Flow content, interactive content, palpable content |
| Content model | One <summary> first, followed by flow content |
| Tag omission | Neither the start nor the end tag can be omitted, for either element |
| Permitted parents | <details>: any element that accepts flow content. <summary>: a <details>, as its first child |
| DOM interfaces | HTMLDetailsElement, HTMLElement (<summary>) |
Syntax
Live example
Edit the code below and watch the preview update instantly.
Attributes
<details>
| Attribute | Description |
|---|---|
| open | Shows the content when the page loads; it is added and removed as the reader opens and closes it |
| name | Details elements that share a name form an accordion: opening one closes the others |
<summary>
| Attribute | Description |
|---|---|
| — | Only the global attributes apply. |
Common examples
An FAQ list
Each question is a summary; the answer stays hidden until clicked. Search engines can still read it.
Open by default
Add the open attribute to show the content when the page loads.
Styling the marker and open state
Replace the arrow with your own icon and change the look while it’s open.
<details> vs a JavaScript accordion
Before <details>, accordions needed JavaScript to show and hide each panel, plus extra ARIA attributes so screen readers knew whether they were open. <details> does all of that by itself: it works with the mouse and keyboard, announces its state, and even works with JavaScript switched off.
A custom JavaScript accordion still makes sense for complex animations or designs the built-in element can’t manage. For FAQs, “read more” sections and simple toggles, <details> is less code and fewer bugs. Add the name attribute to make a group where only one panel opens at a time.
| <details> | JS accordion | |
|---|---|---|
| JavaScript needed | No | Yes |
| Keyboard & screen reader support | Built in | You build it |
| Animations | Limited | Full control |
Common mistakes to avoid
- Leaving out
<summary>. The browser then shows a generic “Details” label. - Putting buttons or links inside the summary. Clicking them also toggles the panel and confuses keyboard users; keep the summary as plain text.
- Hiding essential information. Prices, warnings and the main answer to the page’s question should be visible without clicking.
- Removing the marker without another hint. Without an arrow or +/− sign, visitors may not realise the line is clickable.
Accessibility & SEO tips
- Collapsed content is still in the HTML, so search engines can read and index it — a good way to keep long FAQ pages tidy.
- Pair visible FAQs built with details and summary with FAQPage structured data so search engines understand the questions and answers.
- Browser search (Ctrl+F) can find text inside closed details in modern browsers and opens the panel automatically.
Browser support
Supported in all modern browsers, including Chrome, Edge, Firefox, Safari and their mobile versions. It was introduced with HTML5, and only very old browsers such as Internet Explorer 8 needed workarounds. The name attribute for one-open-at-a-time groups works in all current browsers.
Tutorial: How to make a dropdown menu