details and summary: native disclosure widgets, exclusive accordions and hidden until-found

What it is

<details> wraps content that is shown only while its Boolean open attribute is present; the first child <summary> is the label and the toggle, keyboard-operable by default. Giving several <details> the same name groups them: MDN states only one of the group can be open at a time and opening one closes another, which yields an accordion without script. A toggle event fires on each change. The default <summary> style is display: list-item, which is what draws the marker; ::marker restyles it and display: block removes it. A related tool for collapsed content is hidden="until-found": MDN describes the hidden-until-found state as hidden but reachable by the browser's find-in-page and by fragment navigation, which fire beforematch, remove the attribute and scroll to the element.

Why it matters

FAQ lists, filter panels, settings groups and long tables of contents need collapsing. The native element gives keyboard access, a correct role, state that survives without JavaScript and, with name, the accordion behaviour that otherwise needs a script and ARIA bookkeeping.

How to apply

• Write the summary as a phrase that names the content; assistive technology reads it as the control's label, and the details content becomes its description.
• Use name for "only one open" groups; leave it off when readers should compare sections side by side.
• Put a heading inside <summary> only with care: MDN notes some browsers give <summary> a button role that removes the heading role from its children.
• Style with details[open] summary and ::details-content (content-visibility toggles there, which is where open and close transitions attach).
• Set open on the section that matches the current URL or query when the page renders, so deep links land on visible content.
• Use hidden="until-found" for content that must stay collapsed yet findable, and listen for beforematch if the surrounding UI must update.

Pitfalls

open="false" opens the element, because the attribute is Boolean; remove it to close. Print output shows only open sections; a beforeprint handler can open them if the printout must be complete. Images and iframes inside a closed details are commonly still fetched unless they carry loading="lazy". A <summary> that is not the first child is ignored and the browser inserts a default label.