Expand / Collapse Widget Demo

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

Common questions and short answers:

Q: How does this work?
A: JavaScript toggles max-height and aria attributes, producing a smooth animation.
Q: Is it keyboard accessible?
A: Yes — the control is a native button (Enter/Space will toggle).
Q: Are screen readers supported?
A: The button uses aria-expanded and the region uses aria-hidden and aria-labelledby.

This widget is open by default to demonstrate interactive content inside a details container.

Tip: Buttons use aria-expanded and control the div.details element via aria-controls. The scripts animate height for smooth transitions while keeping the region accessible to assistive technologies.