Expand/Collapse Widgets

Examples of both a custom button-controlled region and a native details/summary component.

Custom: Button controls a collapsible region

Accessible pattern using aria-controls and aria-expanded

Native: HTML details/summary

Built-in browser expand/collapse behavior

The native <details> element provides toggle behavior without JavaScript.

  • Keyboard and mouse support out of the box.
  • The container for controlled content has a details class.
  • We reflect the open state in aria-expanded on the summary via script.

Use CSS to customize the summary marker and transition styles.

Custom: Multiple sections

Independent controls for each content block

Note: The custom widgets require JavaScript to toggle visibility. The native widget works without it, but the script enhances its accessibility state.