HTML <details> Tag
Description
The HTML <details> tag is used to create a disclosure widget, which allows you to hide or reveal additional content within a web page. It consists of a summary, typically a clickable heading, and a hidden content section that is initially concealed but can be expanded or collapsed by clicking the summary. This tag is often used for FAQs, tutorials, or any content that benefits from a compact, collapsible format. When the user interacts with the summary, it toggles the visibility of the associated content, providing a user-friendly way to present supplementary information while keeping the page organized and concise.
Properties
- Permitted Parents
- Any element that accepts flow content
- Content
- Block, inline and text
- Start/End Tags
- Start tag: required, End tag: required
Example
<details>
<summary>About CSSPortal</summary>
<p>CSSPortal is a site dedicated to helping you with CSS.</p>
</details>Attributes
| Attribute | Definition |
|---|---|
| open | Specifies whether the details should be open (visible to the user) or closed (hidden from the user). |
Global Attributes
The <details> tag also supports the Global Attributes in HTML5
Event Attributes
The <details> tag also supports the Event Attributes in HTML5
Browser Support
The following table will show you the current browser support for the HTML <details> tag.
| Desktop | |||||
 |
 |
 |
 |
 |
|
| 79 | 12 | 49 | 15 | 6 | |
| Tablets / Mobile | |||||
|
|
|
|
 |
 |
| 18 | 49 | 14 | 6 | 1 | 4.4 |
Last updated by CSSPortal on: 30th September 2023