<details>
The details element creates a native disclosure widget that shows or hides additional content.
Syntax
<details><summary>...</summary>...</details>Examples
<details open>
<summary>Show shipping info</summary>
<p>Ships in 2 business days.</p>
</details>
Output
Renders an expandable widget; with the open attribute it starts expanded showing the shipping text.
Notes
The first child must be <summary>. Use the name attribute to make sibling details behave like an accordion where only one stays open. The toggle event fires on open/close.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 12 |
| firefox | 49 |
| safari | 6.0 |
| edge | 79 |