Expand/Collapse Widget Examples

Using the Native <details> Element

Learn more about native expand/collapse

The HTML <details> element provides an accessible, keyboard-friendly expand/collapse interface out of the box. The <summary> element acts as the toggle, while any additional content inside is hidden until expanded.

Supports keyboard interaction without extra JavaScript.
Automatically manages ARIA states and focus behavior.
Can be styled with CSS for customized appearances.

Custom Expand/Collapse with JavaScript

This widget uses a button and a content region. The button updates its aria-expanded attribute, and the content region toggles using the hidden attribute. CSS transitions create a smooth animation.

Key accessibility considerations include:

Linking the button and region with aria-controls.
Updating aria-expanded to reflect visibility.
Maintaining focus styles for keyboard users.