Expand / Collapse Widget — Demo

Each widget is wrapped with a .example container. The controlled content container uses the class "details".

Quick summary

This is a short description that is revealed when the widget is expanded. It demonstrates a basic accessible expand/collapse pattern using aria-controls and aria-expanded on the button.

Tip: Use the button (or press Enter/Space) to toggle.

Feature list

Accessible control with aria-expanded and aria-controls
Smooth height animation using max-height + JS to measure content
Keyboard friendly: buttons activate on Enter / Space
Graceful fallback: if JavaScript is disabled the section stays collapsed

This widget calculates the content height on open to animate smoothly even for dynamic content.