HTML: details

The <details> element creates a native disclosure widget for supplementary information, and <summary> provides its visible heading.

What you will learn

How to create expandable content without JavaScript
How summary labels the disclosure control
How to choose content that works well when collapsed

Minimal example

<details>
  <summary>Show delivery details</summary>
  <p>Orders usually arrive within three business days.</p>
</details>

The user can activate the summary to open or close the content. Keyboard users can operate the native control as well.

Open by default

<details open>
  <summary>Important information</summary>
  <p>This content is visible when the page loads.</p>
</details>

Common mistakes

Use a clear summary that tells users what will be revealed.
Do not hide essential information only inside a collapsed section.
Use headings and paragraphs inside the details content instead of treating it as a footnote.