Skip to main content
Accessibility demo

Examples of expand/collapse patterns using native and custom controls.

Expand/collapse widget examples

Each example includes a visible label for the control and a content region that expands or collapses.

Example 1: Native <details> and <summary>

This pattern uses built-in semantics and keyboard behavior (Enter/Space on the summary).

More about this policy

What you can expect

  • Clear next steps and timelines.
  • A way to contact support if you need help.
  • Information that stays readable at narrow screen widths.

If you prefer, you can jump to the button-based example.

Example 2: Button-controlled disclosure

This pattern uses a button with aria-expanded and aria-controls to associate it with the content region.