Expand / Collapse Widget Demo

Two examples showing an accessible expand/collapse pattern. Each widget is wrapped in a div.example and the controlled content container uses the class "details".

This is the controlled content area for the first widget. It is wrapped in a container with class "details". The button above has aria-expanded and aria-controls attributes to link the control and the container.

You can put any content here — text, images, forms, or other interactive elements. The show/hide behavior is animated for a smooth experience.

Additional information

Accessible control with aria-expanded and aria-controls.
Smooth height animation using JS to measure content.
Keyboard-friendly: buttons handle Enter/Space; press Escape while focused inside to close.

Try opening both widgets independently. The implementation ensures the details container is the element with class "details".