Expand/Collapse Widget Examples

Two approaches: native details/summary and a custom ARIA-controlled panel. Each widget is wrapped in a div.example, and the container for controlled content has a details class.

Native details/summary

Uses the built-in HTML details element for accessibility and progressive enhancement.

What are the benefits of the native details widget?

The native details/summary widget provides an accessible, keyboard-friendly disclosure component without JavaScript. It gracefully degrades if unsupported and can be styled to match your design.

  • Built-in keyboard support
  • Semantic and accessible by default
  • No JavaScript dependency

Tip: You can nest additional content, including lists and images, inside the controlled section.

Custom button toggle (ARIA)

A button controls a region with aria-expanded and aria-controls for accessibility.