<details> tag creates an element that can show and hide its content. It is commonly refered to as a disclosure widget that toggles, i.e. open and close, to reveal its details.
<details> element with a list of cities.
Click the triangle to view its content.
<details> <summary>Cities in Europe</summary> <p>Rome</p> <p>Athens</p> <p>Madrid</p> </details>
<details> - defines a content container. It's called a disclosure widget.
<summary> - defines the element's title. If not set the browser will display the word Details
Any elements after <summary> will be the widget's content that can be toggled.
<details> tag creates a container, a so-called disclosure widget.
A disclosure widget can be toggled (opened and closed) to reveal its details.
This tag is rendered with a triangular button that indicates the widget's state.
The caption for this element is specified with the <summary> tag.
Note: Not all browsers support the
<details> widget with the open attribute.
This reveals the content when the page is loaded.
<details open> <summary>Cities in Europe</summary> <p>Rome</p> <p>Athens</p> <p>Madrid</p> </details>
This table lists the
<details> tag attributes.
|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: