The <summary> tag

<summary> sets the visible, clickable heading for its parent details element — clicking it is exactly what expands or collapses the content.

Syntax

<summary>Heading</summary>

Example

<details>
  <summary>Click to expand</summary>
  <p>Hidden content.</p>
</details>

Notes

summary must be the first direct child of details.
The browser adds a disclosure triangle before the summary text automatically; it can be styled via ::marker in modern browsers.

Related tools

The <details> tag

The open attribute of <details> and its pairing with summary for a native accordion.