Expand / Collapse Widget

Basic details: This content is revealed when the button is expanded. It uses aria-controls on the button and aria-hidden on the container for accessibility.

Tip: Press Enter or Space while the button is focused to toggle.

Article summary

The widget smoothly expands to reveal multi-paragraph content. This allows users to hide long sections until they are needed, keeping the page tidy and scannable.

Accessibility: the button uses aria-expanded to indicate the current state and aria-controls to reference the details container. The container includes role="region" and aria-labelledby pointing back to the button.

This example demonstrates an animated expansion that calculates height so transitions are smooth with variable content length.

Enable notifications Dark mode Auto-update Save