description & Usage
The <details> tag is used to contain additional details that the user can view or hide.
The <details> element allows the user to disclose or hide additional details by simply clicking on the summary.
To better understand how the <details> element works, review the example code in the playground.
The <details> element has a <summary> tag as a child element, which is used to specify a heading for the details.
Any content written outside the <summary> tag, but inside the <details> tag, is considered additional details.
For more information, see the <summary> tag page.
Browser compatibility and Support
| # | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| <details> |
Attributes
| Attributes | Values | Description |
|---|---|---|
| open |
open
|
It is used to display text, video and audio content to the user. |
Global Attributes
The <details> tag supports the HTML Global Attributes.
Event Attributes
The <details> tag supports the HTML Event Attributes.
Default CSS
Most browsers will display the <details> tag with the following default style:
