Expand/Collapse Widget

Each widget is wrapped in a div.example. The controlled content container uses the details class and is toggled via a button with aria-expanded and aria-controls.

Widget A

Collapsible panel

This is the controlled content for Widget A. It expands and collapses with a smooth height transition.

Uses aria-expanded to reflect state
Uses aria-controls to link button to panel
Keyboard accessible (Tab + Enter/Space)

Tip: Click the button again to collapse.

Widget B

Expandable notes

Widget B demonstrates independent state per widget wrapper.

You can put any content here: text, lists, or additional controls.

State persists only during the page session.

Widget C

FAQ item

Q: Can I have multiple widgets open?

A: Yes. Each .example controls only its own .details panel.

For an accordion, you could close others when opening one.