Purpose and content model
Details provides a native disclosure that shows or hides supporting content. Its first summary child is the visible control and label. The remaining flow content appears when the disclosure is open. This pattern is suitable for optional explanations, expandable answers, or a compact set of secondary settings.
The disclosure does not create a modal dialog and does not block interaction with the rest of the page. Essential instructions should remain visible. A reader should be able to decide whether opening the disclosure will help by reading its summary, rather than having to expand several controls all labeled More.
Syntax and working example
<details>
<summary>How long can I borrow a book?</summary>
<p>The normal loan period is three weeks.</p>
</details>Supported attributes and behavior
Details supports open and name in addition to globals. Open is boolean: open=false still opens the disclosure when the attribute is present. Matching name values can create an exclusive group in supporting browsers. Summary uses global attributes and a constrained content model involving phrasing or heading content. The toggle event reports changes, and the open property can be controlled from JavaScript when needed.
Another practical pattern
<details name="membership"><summary>Adult membership</summary><p>Bring proof of address.</p></details>
<details name="membership"><summary>Child membership</summary><p>A parent or guardian can help with registration.</p></details>Accessibility and browser notes
Native summary supports keyboard activation. Preserve its focus indicator and a recognizable expanded/collapsed cue. Browser and assistive-technology behavior can change when summary display or marker styles are heavily altered. Test grouped details behavior independently from the basic element's support.
Common mistakes
Do not put summary after the content, add two click handlers that toggle twice, or manually maintain aria-expanded when the native control already exposes its state. Do not use a disclosure as a substitute for a genuinely separate page when the hidden content is a substantial primary task.
Verify your implementation
Tab to the summary, activate it, and confirm that the revealed content follows in a sensible reading order. Test open and closed initial states and grouped controls with long answers. Disable JavaScript to verify that the core disclosure still works.
Standard status and sources
Standard; browser availability must be checked independently of specification status.