Expand / Collapse Widget

Accessible expand/collapse examples. Each widget is wrapped in a div.example and the controlled content container uses the class details.

Example 1

Basic text panel

This panel contains some explanatory text. It is hidden by default and revealed when you toggle the button above.

Use these widgets to show optional information without overwhelming the page. The button is keyboard-accessible and updates aria-expanded and aria-hidden for assistive technologies.

Example 2

A list of items

Alpha — first item with some extra notes.
Beta — another item to demonstrate the list.
Gamma — final item in this small collection.

Example 3

Form details

Name Email