Definition
The <details> HTML element is used to create a disclosure widget that allows the user to show or hide additional content. It provides a way to create collapsible sections of content, often used to present additional information or details that can be toggled open or closed.
Here’s an example of how to use the <details> element:
<details>
<summary>Click to toggle additional information</summary>
<p>This is some additional content that can be shown or hidden.</p>
</details>
In this example, the <details> element contains a <summary> element, which serves as the header or label for the collapsible section. When the user clicks on the summary, the additional content within the <details> element is revealed or hidden, depending on its current state.
By default, the browser provides a small triangle or disclosure icon next to the summary, indicating the expand/collapse functionality. The appearance of the disclosure widget can be styled using CSS to match the design of your webpage.
The <details> element can contain various types of content, such as paragraphs, lists, images, or even nested elements and components. This allows you to present a range of information or interactive elements that can be toggled open or closed for better organization and readability.
It’s important to note that the <details> element can be used with or without the open attribute. If the open attribute is present, the additional content will be visible by default. Otherwise, the content will be initially hidden until the user interacts with the disclosure widget.
The <details> element is supported in modern web browsers, but it’s a good practice to provide alternative content or fallbacks for browsers that do not support it. For example, you can wrap the content within a <div> element and style it to be initially hidden, revealing it with JavaScript when the user interacts with a custom toggle button.