<details> and <summary>: native collapsibles

Browsers ship a free accordion widget

<details>
  <summary>Click to expand</summary>
  <p>Hidden content. Toggles on click. Keyboard-accessible.</p>
</details>

That's the entire feature. No JS. No framework. No event listeners. Works on every browser.

Open by default

<details open>
  <summary>This starts expanded</summary>
  <p>…</p>
</details>

Common uses

• FAQ entries — clean, accessible, semantic.
• "Show more" buttons — for long content sections.
• Code-listing toggles — collapse the boilerplate.
• Disclaimer / Terms — collapsed by default.

Style the marker

The default disclosure triangle is browser-specific (▶ → ▼ on most). Hide and replace:

summary {
  list-style: none;       /* Firefox + Chrome */
  cursor: pointer;
}
summary::-webkit-details-marker { display: none; }   /* Safari */
summary::before { content: "+"; margin-right: 8px; }
details[open] summary::before { content: "−"; }

NOT a modal

<details> collapses inline. For a modal that overlays the page, use <dialog> (next lesson) — different tag for a different job.