Expand / Collapse Widget Examples

Overview: This project demonstrates an accessible expand/collapse widget. It uses a button with aria-expanded and a separate content container that has the class "details". JavaScript updates attributes and animates the container's height.

Notes: The button controls the visibility and the container has role="region" so assistive technologies can announce changes when focus moves inside.

v1.2.0 — Added animation and improved accessibility.

Click the header to collapse or expand.
Space / Enter activate the control when focused.
aria-expanded on the button and aria-hidden on this container are kept in sync by script.

Expand / Collapse widget examples