<details>: The DETAILS Element
Last updated: 2026-10-13
<details>The DETAILS Element
Represents a disclosure widget that can be toggled open/closed by clicking its summary.
| Category | Semantic |
|---|---|
| Content Model | Flow content |
| Allowed Parents | Any element that accepts flow content |
| Content Tag | Yes — requires closing </details> tag |
| Status | Standard |
📝 Syntax
<details>collapsible content</details>▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <details> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： Collapsed by default; add the open attribute to expand initially. Works without JS.
❓ FAQ
QWhat happens if details has no summary?
AThe browser uses its default label (Details in Chrome, localized per browser) as the disclosure control. For custom button text you must provide a
<summary> as the first child — better for accessibility too.QHow do I make details open by default?
AAdd the boolean attribute
open: <details open>. The page loads expanded and users can still click to collapse. JavaScript can read and write the details.open boolean to control it programmatically.QCan details make an exclusive accordion?
ANative
<details> elements are independent and cannot be mutually exclusive. The newer spec adds the name attribute: <details name='faq'> elements with the same name form an exclusive group where only one is open at a time; older browsers need a JS fallback.🏷️ Related Tags
💡 Related Cases
More case studies coming soon — check back later.
📚 Related Tutorials
