Expand/Collapse Widget

Accessible expand/collapse sections with controlled content.

Overview

This section demonstrates a basic expand/collapse pattern. Click the button above to reveal or hide the content controlled by the widget.

Key points:

The toggle button manages visibility of the content.
The content container has a details class.
ARIA attributes reflect the current state for assistive technology.

FAQ: Common Questions

What is an expand/collapse widget?
It’s an interactive control that toggles the visibility of additional content.

Why use it?
It keeps pages tidy by hiding details until they’re needed, improving scan-ability and focus.

Is it accessible?
Yes—when implemented with proper semantics. Here we use a native button, the aria-expanded attribute, and connect the button to its content via aria-controls.

Advanced: Nested Content

This example includes more structured content, such as a list and a secondary callout.

Collapsible sections can contain any HTML elements.
State is managed by JavaScript to set hidden appropriately.
Styling uses simple CSS and can be customized.

Tip: Keep labels descriptive so users know what will be expanded.

Demo: Each widget is wrapped in a div with an "example" class. The container for controlled content uses the "details" class and is toggled by an accessible button.