<details> is a disclosure widget: its first <summary> child is always visible and acts as a toggle button, and everything else shows only while the boolean open attribute is present (so open="false" still means open). The browser supplies the marker, keyboard support and the expanded state for screen readers. Baseline since January 2020.
Give several <details> elements the same name and they form an exclusive accordion: opening one closes the others, with no JavaScript. Members need not be adjacent, and if several start with open, only the first in source order stays open. Exclusive accordions reached Baseline in September 2024 (Chrome 120 1 , Firefox 130 555 , Safari 17.2 10 ); older browsers simply let several panels open at once, a harmless fallback.
<style>
:root { interpolate-size: allow-keywords; } /* lets height animate to auto */
body { font: 15px system-ui; margin: 16px; max-width: 560px; }
details { border: 1px solid #cfd8dc; border-radius: 8px; margin-bottom: 8px; }
summary { padding: 10px 14px; cursor: pointer; font-weight: 600; list-style: none; }
summary::before { content: "+"; display: inline-block; width: 1.2em; color: #1565c0; }
details[open] > summary { background: #e3f2fd; }
details[open] > summary::before { content: "−"; }
details::details-content { block-size: 0; overflow: hidden;
transition: block-size .3s, content-visibility .3s allow-discrete; }
details[open]::details-content { block-size: auto; }
details p { margin: 0; padding: 10px 14px; }
</style>
<details name="faq" open>
<summary>Do I need JavaScript for this accordion?</summary>
<p>No. The shared <code>name</code> attribute makes the browser close the other panels.</p>
</details>
<details name="faq">
<summary>Can users open two answers at once?</summary>
<p>Not in the same group. Use different names, or none, to allow that.</p>
</details>
<details name="faq" open>
<summary>What happens to this second open attribute?</summary>
<p>It is ignored: only the first open member of a group stays open.</p>
</details>
The ::details-content pseudo-element (Baseline since September 2025) targets the collapsible part, so you can animate it; interpolate-size lets block-size transition to auto in Chromium 4,389 , while other browsers open instantly. list-style: none removes the default ::marker of the <summary>. The toggle event fires after every change; read details.open in the handler.
Keep critical information outside accordions, since hidden content is easy to miss, and do not build tabs from <details>: tabs need the tablist pattern with arrow-key navigation (see Accessibility). If an interviewer asks how to build an accordion without JavaScript, the answer is now <details name>, not the old checkbox-and-:checked hack.