Expand/Collapse Widgets

Examples of native and custom expand/collapse interactions. Each widget is wrapped in a container with class "example", and the controlled content container uses class "details".

Native HTML Details/Summary

Built-in expand/collapse using the details element with an accessible summary trigger.

Project overview

This section uses the native details/summary elements, which provide built-in keyboard and screen reader support.

  • Keyboard: Space or Enter toggles the summary.
  • ARIA: Screen readers announce expanded/collapsed state automatically.
  • Semantics: The details element is the container with class "details".

Custom Button-Controlled Widget

A button toggles a content region. The content container is a div with class "details".

CSS-Only Checkbox-Controlled Widget

A hidden checkbox toggles visibility through CSS. The controlled content has class "details".

This example demonstrates a CSS-only approach using a checkbox and label pair. When the checkbox is checked, the "details" content becomes visible.

  • No JavaScript required.
  • Uses sibling selectors to control visibility.
  • Ensure adequate labeling for accessibility.