Expand / Collapse Widget

This section contains a brief overview of the expand/collapse widget. It demonstrates an accessible pattern using aria-expanded on the trigger and aria-hidden on the controlled content.

Keyboard: the trigger is a native button, so Enter and Space activate it. Focus remains on the button when content is collapsed.

Example action

Here is a longer block of content to show how the open/close animation adapts to height. The script measures the content height to animate between 0 and the content's full height.

• Fully accessible attributes (aria-expanded, aria-hidden, aria-controls, aria-labelledby)
• Smooth height animation
• Multiple independent instances supported

Tip: Use Enter or Space to toggle the panels via keyboard.