Expand / Collapse Widget Demo

Examples of an accessible expand/collapse widget. Each widget is wrapped in a div.example and the content container uses the class details.

This panel contains more detailed information. Use it to surface additional paragraphs, lists, or other content that people may want to read without overwhelming the surrounding UI.

Point one with a short explanation.
Point two which may include slightly more text to show wrapping behavior.
Point three — demonstrates that lists work inside the details container.

Keyboard: Focus the button and press Enter or Space to toggle. The button also exposes aria-expanded and aria-controls for assistive technologies.

This example is rendered open by default. It demonstrates the initial-open state. The script will respect data-open="true" on the details container to initialize it as open.