Definition
The <summary> HTML element is used as a summary or heading for a <details> element, which represents a disclosure widget that can be expanded or collapsed to reveal or hide additional content. The <summary> element provides a visible title or label for the details element, helping users understand the purpose of the content that can be expanded or collapsed.
Here’s an example of how to use the <summary> element within a <details> element:
<details>
<summary>Show more information</summary>
<p>This is the additional content that can be expanded or collapsed.</p>
</details>
In this example, the text “Show more information” is wrapped within the <summary> element. When the details element is initially displayed, only the summary is visible. Users can click on the summary to expand or collapse the additional content contained within the <details> element.
The <summary> element can contain text, images, or other HTML elements to provide a meaningful summary or label for the details element. It is important to ensure that the summary accurately describes the content that will be revealed when expanded.
The expanded or collapsed state of the details element can be controlled programmatically using JavaScript. By adding event listeners or manipulating the open property of the details element, you can control the behavior of the disclosure widget based on user interactions or specific conditions.
It’s worth noting that the <summary> element should always be used within a <details> element. Using a <summary> element without a parent <details> element may not produce the desired results or may have limited accessibility.