Expand/Collapse Widgets

Two approaches: a custom button-controlled region and the native HTML details element. Both examples wrap each widget with a div that has an example class, and use a container for controlled content with a details class.

Custom button-controlled region

Native details element

Native details summary

This uses the native <details> and <summary> elements with the details class applied to the container.

  • Keyboard and accessibility support are built-in.
  • Click the summary to expand/collapse.
  • The controlled content is inside this element.

Custom region with focus management