Text and Lists

Details Summary

Disclosure Without Script

A deploy checklist uses summary and details so the browser owns a simple disclosure interaction.

Program

Some browser interactions are already built into HTML. Details and summary create an expandable region without JavaScript.

details_summary.html
Visuals: captured from real browser rendering
<details open>
  <summary>Deploy checklist</summary>
  <p>Run tests before upload.</p>
</details>

  1. Create an open disclosure widget.

    An open disclosure container appears.
    The open attribute makes the details content visible immediately.

  2. Add the visible disclosure label.

    The disclosure shows a Deploy checklist label.
    Summary labels the expandable control.

  3. Add the disclosed body text.

    The Deploy checklist label now reveals a test reminder.
    The paragraph is the content shown while details is open.
details A details element creates a disclosure widget with hidden or visible content.
summary The summary is the always-visible label for a details widget.