Expand / Collapse Widget Examples

This widget demonstrates a custom expand/collapse interaction. It uses a button to toggle visibility, with proper ARIA attributes:

aria-controls on the button references the content container's id.
aria-expanded indicates the current state of the button.
role="region" and aria-labelledby help screen reader users locate the content.

Keyboard: Space or Enter activates the button; focus styles are applied for clarity.

This example starts expanded. The JavaScript sets inline max-height values to produce a smooth height transition based on the content's scrollHeight. Resizing the window updates heights for any open panels.

Because the control is a native button, it automatically supports Space/Enter activation and remains keyboard-accessible.

Expand / Collapse (Accessible) — Examples