The <details> tag

<details> creates a widget that expands/collapses on click, with zero JavaScript. Its heading is set via summary.

Syntax

<details>
  <summary>Heading</summary>
  Content
</details>

Attributes

open	If present, the content is shown expanded immediately on load.

Example

<details open>
  <summary>What's included in the plan?</summary>
  <p>Unlimited tools.</p>
</details>

Notes

Without summary, the browser shows a default placeholder text instead of a real heading.

Accessibility

details/summary are keyboard-accessible and announced by screen readers natively, with no extra ARIA markup needed.

Related tools

The <summary> tag

Purpose of <summary>: a clickable heading that expands its parent details.

Accordion (details/summary)

A native accordion built on details/summary, accessible out of the box, no JS.