Expand / Collapse Widget Examples

Two examples of an accessible expand/collapse widget. Each widget is wrapped in a div.example. The content container for each widget uses the class "details".

This panel contains additional information that you can reveal or hide. Use the button above to toggle visibility. The control uses aria-expanded and aria-controls to communicate state to assistive technologies.

Keyboard users: the toggle is a native button element, so it supports Enter and Space automatically.

Example 1: initially collapsed

Dimensions: 220 × 140 × 12 mm
Weight: 480 g
Battery: 4,000 mAh
Connectivity: Wi‑Fi, Bluetooth 5.2, USB‑C

Example 2: initially expanded.

Try collapsing and expanding to see the animated height transition.