Collapsible

Basic

The primitive that .accordion, .sidebar submenus, and .navbar mobile menu compose for their own collapse behavior. A trigger button and a content region tied by id. The trigger points at the region via data-stisla-collapsible-trigger; the region carries data-stisla-collapsible and data-state="open" or "closed" driving the paint. The height transition runs around every state flip.

Keyboard

The trigger is whatever element you wire to the region. The collapsible itself adds no key bindings beyond the trigger's native ones. When the trigger is a native <button>, the browser handles focus and activation.

• Tab: focus the trigger
• Enter / Space: toggle the panel

Open by default

Render the region with data-state="open" to start open. The trigger's aria-expanded follows on construction.

Inside a card

A common shape: a card with extra detail hidden behind a trigger. The region's content owns its own surface so the card body doesn't paint inside the collapsed footprint.

Programmatic control

Build a Stisla.Collapsible directly to drive a region from code. The buttons below call open(), close(), and toggle() on an instance from Stisla.Collapsible.getOrCreate(el).

Events

Four events bubble from the region element. The opening and closing events are cancelable.

stisla:collapsible:opening fires before the open transition starts. Call preventDefault() to abort.

stisla:collapsible:opened fires after the open transition ends.

stisla:collapsible:closing fires before the close transition starts. Call preventDefault() to keep it open.

stisla:collapsible:closed fires after the close transition ends.

Customization

One variable retunes the animation. Override on the root, a wrapper, or a single region.