Accessible examples that use a button with aria-expanded and aria-controls to show/hide a controlled content area with class="details". Each widget is wrapped in a div.example.
Simple show/hide
This is a basic expandable section. Use a button element with aria-expanded and aria-controls to control this panel.
Accessible and keyboard friendly: press Enter or Space while the button is focused.
Smooth open/close animation
This panel demonstrates a smooth height transition when opening and closing. Content may include paragraphs, lists, or other markup.
Point one
Point two
Point three
The script measures the content height to animate max-height reliably.
Contains another expandable inside
Parent content. Below is a nested expand/collapse widget.
This is the nested content. Widgets can be composed arbitrarily.