What do the details and summary elements provide?

Question

Accepted Answer

`

` and `

` create a **native disclosure widget** — an expandable/collapsible section — with **zero JavaScript**. The browser handles the toggle, keyboard support, and accessibility for you. ```html

Click to expand

This content is hidden until the user opens it.

``` - **`

`** is the clickable label (the first child). - Everything after it is the collapsible content. - Clicking the summary toggles open/closed — natively keyboard-accessible (Enter/Space) and announced correctly by screen readers. ## Open by default & detecting state ```html

FAQ item

Answer...

``` ```js const d = document.querySelector("details"); d.open; // boolean: is it open? d.addEventListener("toggle", () => console.log(d.open)); // fires on open/close ``` ## Styling the marker ```css summary { cursor: pointer; } summary::marker { color: blue; } /* the triangle/arrow */ details[open] summary { font-weight: bold; } /* style when open */ ``` ## Real use cases FAQ accordions, "show more" sections, collapsible sidebars, spoiler text, expandable table rows. Before this element, every accordion needed JavaScript plus ARIA wiring for accessibility — now it's two semantic tags. ## Why it matters `

`/`

` give you accessible, keyboard-friendly collapsible content with no JS and no manual ARIA — a perfect example of using the platform. Reach for it for FAQs and "show more" patterns before building a custom accordion.