0Pricing
HTML Academy · Lesson

details and summary Disclosure Widget

Build native expand/collapse components without JavaScript.

What Are details and summary?

The <details> and <summary> elements create a native disclosure widget — an expand/collapse component — without any JavaScript:

<details>
  <summary>What is HTML?</summary>
  <p>HTML (HyperText Markup Language) is the standard markup language
     used to create web pages.</p>
</details>

How It Works

Interaction behavior:

  • By default, only the <summary> is visible
  • Clicking the summary toggles the visibility of the remaining content
  • A disclosure triangle appears on the summary by default
  • No JavaScript required

All lessons in this course

  1. aside Complementary Content
  2. figure and figcaption Revisited
  3. details and summary Disclosure Widget
  4. The progress and meter Elements
← Back to HTML Academy