Expand/Collapse Widgets

Examples using native and custom interactive patterns.

Native details element

What is an expand/collapse widget?

An expand/collapse widget reveals additional content on demand. The native <details> element provides this behavior with built-in accessibility and keyboard support.

  • Click the summary to toggle visibility.
  • Use keyboard: Space or Enter toggles; Tab focuses the summary.
  • Open state can be reflected using the [open] attribute.

Button-controlled content

Another details example

More tips

Consider the following tips when using expand/collapse:

  • Keep summary labels short and descriptive.
  • Group related content under a single panel when possible.
  • Ensure focus management when toggling complex layouts.