Two styles of accessible expand/collapse widgets. Each widget is wrapped in a container with the class "example". The controlled content containers use the class "details". Buttons use aria-expanded and aria-controls to link to their content.
Basic details
This content is shown or hidden immediately when the button is toggled. It demonstrates a simple, accessible expand/collapse pattern using aria-expanded and aria-controls.
Tip: press Space or Enter to toggle the button when focused.
Smooth expand/collapse
This variant animates the height when expanding and collapsing. The script measures the content height to animate between 0 and the content height so the transition is smooth for varying content sizes.
Accessible: uses aria-expanded / aria-controls.
Keyboard friendly: the button is a native button element and works with Space / Enter.
Works when content size changes (script handles resetting max-height after animation).