Expand / Collapse Widget

This is a short bit of content that is revealed when the widget is expanded. Use this pattern for small contextual information that doesn't need to be shown by default.

Tip: Buttons are keyboard accessible (Enter / Space) and announce their state via aria-expanded.

This example contains a longer block of text and an image. The widget measures the content height and animates the expansion smoothly. When the section is opened the inline max-height is cleared so content can reflow naturally.

Animating max-height provides a smooth transition. This approach calculates the scrollHeight and sets a matching max-height to animate from 0 to the content height.