The <details> HTML element is used to create a disclosure widget that allows users to toggle the visibility of additional content. This element is particularly useful for creating collapsible sections on a webpage, such as FAQs, additional information sections, or spoiler content. The <details> element enhances user experience by allowing users to control what information they want to see, helping keep web pages organized and less cluttered.
The <details> element typically contains a <summary> element as its first child. The <summary> serves as the clickable label or title for the collapsible section. When the <summary> is clicked, the content within the <details> element is revealed. Clicking it again hides the content. The <details> element can contain any valid HTML content, such as text, images, lists, and tables. Here is an example of how the <details> tag can be used:
<details>
<summary>More Information</summary>
<p>This is additional content that is hidden by default and can be revealed by clicking the summary.</p>
</details>Valid Attributes for <details>
| Attribute | Description |
|---|---|
| open | A Boolean attribute that, if present, indicates that the details are visible when the page loads. |
The <details> element supports all global attributes, allowing for additional customization and interaction through CSS and JavaScript. It also supports the toggle event, which is triggered whenever the element's state changes between open and closed.
In summary, the <details> element is a versatile tool for creating interactive and collapsible sections on a webpage. It provides a straightforward way to manage content visibility, enhancing user interaction and content organization without the need for JavaScript.