Collapsible

A collapsible component that toggles between expanded and collapsed states with smooth animations.

Features

• ✅ Smooth collapse/expand animations
• ✅ Accessible ARIA attributes
• ✅ Keyboard support
• ✅ Custom trigger and content elements
• ✅ Optional indicator for visual state
• ✅ Event dispatching on toggle

Installation

import Alpine from 'alpinejs'
import collapsible from 'alpine-headless-ui/collapsible'

Alpine.plugin(collapsible)
Alpine.start()

Examples

Basic Collapsible

This is the collapsible content that can be toggled.

With Indicator Icon

Content with a chevron indicator that rotates when opened.

Initially Open

This content starts expanded.

Disabled State

This content cannot be toggled.

API Reference

Component Props

Prop	Type	Default	Description
open	boolean	false	Initial open state
disabled	boolean	false	Disable interactions

<div x-collapsible="{ open: false, disabled: false }">
  <!-- ... -->
</div>

Parts

Part	Description
x-collapsible	Root container element
x-collapsible:trigger	Button that toggles the collapsible
x-collapsible:content	Content that is collapsed/expanded
x-collapsible:indicator	Optional element for visual indicators (like icons)

x-collapsible:trigger

The button or element that triggers the collapse/expand action.

Automatically receives:

• type="button"
• aria-expanded attribute
• aria-controls linking to content
• data-state attribute ("open" or "closed")
• data-disabled attribute (when disabled)
• Click handler for toggling

<button x-collapsible:trigger>Toggle</button>

x-collapsible:content

The content that is collapsed/expanded.

Automatically receives:

• x-collapse directive for smooth animations
• x-show tied to open state
• data-state attribute ("open" or "closed")
• data-disabled attribute (when disabled)
• id for ARIA association

<div x-collapsible:content>
  Content here
</div>

x-collapsible:indicator

Optional element for visual indicators (like icons).

Automatically receives:

• data-state attribute ("open" or "closed")
• data-disabled attribute (when disabled)

<span x-collapsible:indicator>▼</span>

Data Attributes

Attribute	Description
data-state	Current state (open or closed) on trigger, content, and indicator
data-disabled	Present when disabled on trigger, content, and indicator

Events

Event	Detail	Description
change	{ open: boolean }	Fired when the collapsible state changes

<div x-collapsible x-on:change="console.log('Open:', $event.detail.open)">
  <!-- ... -->
</div>

Accessing State

You can access the collapsible API using $collapsible:

<div x-collapsible>
  <button x-collapsible:trigger>
    <span x-text="$collapsible.open ? 'Collapse' : 'Expand'"></span>
  </button>
  <div x-collapsible:content>Content</div>
</div>

Available properties:

• open - Current open state
• disabled - Current disabled state
• visible - Whether content is visible
• setOpen(value) - Programmatically set open state
• toggle() - Toggle open state

Accessibility

ARIA Attributes

The collapsible automatically includes:

• type="button" on the trigger
• aria-expanded on the trigger (true/false)
• aria-controls linking trigger to content
• Proper id attributes for associations

Keyboard Support

Key	Action
Enter	Toggle open/closed state
Space	Toggle open/closed state

See Also

• Accordion - Multiple collapsibles with coordinated behavior
• Tabs - Alternative pattern for showing/hiding content