Expand / Collapse Widget Demonstration

This is a basic expand/collapse panel. It demonstrates the minimal accessible pattern: a button with aria-expanded and an associated content region.

Use the button above to open and close this panel. Focus is managed so the region is reachable when open but avoided when closed.

This panel contains a bit more content to demonstrate smooth height transitions. When you open it, JavaScript measures the content and animates the max-height to the content's height for a smooth experience.

You can place any HTML content inside, such as lists, images, or forms. The implementation keeps the content accessible by toggling aria-expanded on the control and aria-hidden on this region.

• Accessible labeling via aria-labelledby
• Keyboard operable (Space/Enter on the button)
• Prefers-reduced-motion respects user settings

Interactive content remains usable when the panel is open. Below are some example controls:

When the panel is closed, the controls are not presented to assistive tech (aria-hidden="true").