HTML <details> Element
The <details> element creates a disclosure widget that visitors can open and close to reveal or hide additional content. It is commonly used for supplementary information, explanations, frequently asked questions, and other content that does not need to remain visible at all times.
Syntax
<details>
<summary>More Information</summary>
<p>Additional information appears when the details element is opened.</p>
</details>The <summary> element provides the visible label that visitors select to open or close the <details> element. The remaining content is displayed when the disclosure widget is open.
Attributes
The <details> element supports the global HTML attributes and the following element-specific attributes:
| Attribute | Description |
|---|---|
name |
Assigns the element to a group of related disclosure widgets so only one member of the group can be open at a time. |
open |
Specifies that the disclosure widget should be open and its additional content visible. |
Example
The following example creates an expandable section that reveals additional information when the visitor selects its summary:
Usage Notes
The <details> element provides built-in show-and-hide behavior without requiring JavaScript. Visitors can activate its <summary> to switch between the closed and open states.
When the open attribute is present, the disclosure widget is initially open. Because open is a boolean attribute, its presence makes the element open regardless of the value assigned to it.
The name attribute can group multiple <details> elements. When members of the same group use the same name, opening one closes another open member of that group.
A <summary> element should be used to provide a meaningful label for the disclosure widget. Without one, the browser supplies its own default label.
Accessibility
Use a clear and descriptive <summary> so visitors can understand what information will be revealed before opening the <details> element.
The native disclosure behavior is keyboard accessible in modern browsers, so use the built-in <details> and <summary> elements instead of recreating the same interaction with non-semantic elements when their native behavior meets the page's needs.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
For detailed browser compatibility information, see Can I Use: HTML <details> Element .
Related Elements
<summary> - Provides the visible label or heading used to open and close a details element.