Expand/Collapse Widget Examples

Each widget below uses a shared pattern: a toggle button with descriptive text, a rotating indicator, and a smooth transition that reveals the controlled content container.

This expand/collapse widget connects a single control to a single content region. The button advertises its target via aria-controls while the current state is published through aria-expanded.

  • Pair the toggle and content using matching IDs.
  • Announce state changes with clear labels such as “Show” and “Hide”.
  • Keep animation durations short so the interface remains responsive.

Because the content region uses a dedicated div.details container, it can be styled with consistent padding, borders, and background treatments across the layout.

Is the animation optional?
Yes. Users who prefer reduced motion receive an immediate show/hide change without transitions.
Can multiple widgets operate independently?
Each widget is self-contained. The script wires up every .example block individually so you can mix and match them on a page.
What about keyboard support?
The toggle is a native button element, so keyboard users tab to it and press Space or Enter to activate the control.
  1. Markup the toggle button and controlled div.details region.
  2. Assign a unique ID to the content and reference it via aria-controls.
  3. Update aria-expanded plus any visible labels whenever the state changes.
  4. Provide reduced-motion behavior so the reveal is instantaneous when preferred.
// Example customization hook
toggle.addEventListener("expand", () => {
  analytics.track("widget_opened", { id: content.id });
});