Expand / Collapse Widget Examples

Two accessible expand/collapse widgets. Click the buttons to reveal or hide the associated content. Each controlled container uses the class="details".

Quick summary

This panel contains a short explanation of the widget behavior. It demonstrates how to toggle visibility while keeping the content accessible to assistive technologies. Use the button above or press Enter/Space when it has focus.

Tip: the button uses aria-expanded and aria-controls, the panel uses aria-hidden and the class "details".

Rich content example

Here is a richer content area with an image and paragraph. The container with class "details" is used to show/hide this content. The transition is animated by changing max-height from 0 to the measured content height for a smooth expand/collapse.