Accessible Expand / Collapse Widgets

Two accessible examples: a native details element and a custom button-controlled widget. Both use a container with the class "details" for the controlled content. Each widget is wrapped in an element with the class "example".

Example 1 — Native details element

Use Enter or Space to toggle the disclosure. The content container below has class="details".

What's included in this package

When you expand this section, you'll see a short list of items included in the package:

  • Quick-start guide and README
  • Prebuilt components and styles
  • Accessibility and testing notes

Native <details> and <summary> elements provide built-in keyboard support and are widely supported by assistive technologies.

Example 2 — Custom button-controlled widget

This custom version uses a button with aria-expanded and aria-controls. The controlled content is a div with class="details".