Expand/Collapse Widgets

Two accessible patterns: a native <details> disclosure and a button-controlled region using aria-expanded and aria-controls.

Example 1: Native disclosure

What information is inside?

This content is controlled by the native <details> element, which provides built-in keyboard and screen reader support.

  • Press Enter or Space on the summary to toggle.
  • State is conveyed via the open attribute.

Tip: Use <details> when you don’t need custom animation or complex state management.

Example 2: Button-controlled region

Keyboard: Tab to the button, then press Enter or Space to toggle.