Expand / Collapse Widget Examples

This is a simple expanded area. The container has the class "details" as required. The button controls the area via aria-controls and aria-expanded.

Tip: Expand and collapse using mouse, touch, or keyboard (Enter/Space).

Here's a larger block of content to illustrate how the widget handles content of changing height. When the panel opens, its height is animated from 0 to the content height; when it closes the animation runs in reverse.

• First item in a list
• Second item with a link
• Third item

This region uses role="region" and aria-labelledby to make its relation to the toggle clear to assistive technologies.