Expand/Collapse Widgets

Examples of native and custom expand/collapse controls. Each widget is wrapped with a div having class example, and the controlled content uses the class details.

Native details/summary widget

What is an expand/collapse widget?

An expand/collapse widget lets users show or hide additional information. The native HTML <details> element provides built-in accessibility and keyboard behavior.

  • Click or tap the summary to toggle content.
  • Press Space or Enter when the summary has focus.
  • State is persisted in the open attribute.

Custom button-controlled widget

Another custom widget (start expanded)

Frequently Asked Questions

Is this accessible?
Yes. Buttons update aria-expanded and control content via aria-controls. The container is a region with a label.
Can I style it?
Absolutely. The content container uses the class details for easy styling.