Expand/Collapse Widgets

Examples of native and custom expand/collapse interactions.

What is an expand/collapse widget?

An expand/collapse widget hides content until the user chooses to reveal it. The native HTML details element provides this behavior with built-in accessibility.

  • Use the Enter or Space keys to toggle.
  • Screen readers announce the expanded state automatically.
Pre-opened section

This section starts expanded. Toggle it to collapse.

Any HTML content can be placed inside.

Accordion (single-open)

This simple accordion ensures only one panel is open at a time.