Expand/Collapse Widgets

Three variations: native details, ARIA-controlled panel, and a single-open accordion.

Example 1 — Native <details> / <summary>

What is included? Click to expand

This uses the browser’s built-in open/close behavior.

  • Keyboard accessible by default
  • State is stored in the open attribute
  • Simple markup

Example 2 — Button toggles a controlled panel

Tip: Use Tab to focus the button, then Enter / Space to toggle.

Example 3 — Accordion (only one open at a time)