core / makeup-expander

Creates expand/collapse interactivity between a host element and its content, with support for click, focus, and hover triggers.

Click (no auto-collapse)

Content stays expanded until the host is clicked again.

Auto-collapse flyouts

Each flyout collapses when focus or the mouse leaves.

Click:

Focus:

Focus or hover:

Hover (with stealth button for keyboard access):

Click or spacebar (readonly input with icon):

Tooltip (useAriaExpanded=false)

Uses a CSS class instead of aria-expanded. Suitable for tooltips where the ARIA role handles state.

Events

expander-expand and expander-collapse fired by any expander on this page.