<details> and <summary>
Disclosure, no JavaScript.
A native expand/collapse component with built-in keyboard support, screen-reader semantics, and almost zero CSS to style.
name attribute = accordion
Adding the same name="x" to multiple <details> elements turns them into a single-open accordion β opening one closes the others. Pure HTML.
::details-content (modern browsers)
The ::details-content pseudo-element styles the body of an open details element. Combine with interpolate-size: allow-keywords to animate height: auto.
Open by default
Add the open attribute to render the content visible on page load. JavaScript can set/remove it to control state.
The name attribute does more than group β it makes a group exclusive: at most one panel is open at a time, just like a radio-button set. Pair it with the open attribute so the group starts on a chosen panel, and style ::marker (or hide it for a custom indicator) to brand the disclosure triangle.
Try it 4 examples
Plain details / summary
HTML+CSS+JSintroEach disclosure renders collapsed with only the <summary> visible and a default triangle marker; clicking a summary toggles its <p> open or shut independently, with no JavaScript and full keyboard/screen-reader support built in.