The <details> tag creates a control, a so-called disclosure widget.
This control can be toggled (opened and closed) to reveal its details.
It is rendered with a triangular button that indicates the widget's state.
The caption for this element is specified with the <summary> tag.
A <details> element with a list of cities.
Click the triangle to view its content.
Rome
Athens
Madrid
<details>
<summary>Cities in Europe</summary>
<p>Rome</p>
<p>Athens</p>
<p>Madrid</p>
</details>
The <details> tag defines a content container. It's called a disclosure widget.
The <summary> tag defines the element's title.
Any elements after <summary> will be the widget's content that can be toggled.
Note: Not all browsers support the <details> element.
Tip: Developers generally create their own custom disclosure widgets with CSS, JavaScript, or Bootstrap.
A <details> widget with the open attribute.
This immediately reveals the content when the page is loaded.
Rome
Athens
Madrid
<details open>
<summary>Cities in Europe</summary>
<p>Rome</p>
<p>Athens</p>
<p>Madrid</p>
</details>
This table lists the <details> tag attributes.
| Attribute | Value | Description |
|---|---|---|
| open | open | Specifies that the content is visible to the user. The default is 'not open'. |
| id | value | Provides the details element with a unique identifier. |
| class | classnames | Assigns one or more classnames to the details element. |
| style | CSS-values | Assigns CSS style values to the details element. |
For additional global attributes see our global attributes list.
Here is when <details> support started for each browser:
 Chrome
|
12.0 | Jun 2011 |
 Firefox
|
49.0 | Sep 2016 |
 IE/Edge
|
-- | Not supported |
 Opera
|
15.0 | Jul 2015 |
 Safari
|
6.0 | Jul 2012 |
