Collapse Plugin (x-collapse)

Smooth height transitions for toggled elements.

Collapse Plugin

The @alpinejs/collapse plugin adds the x-collapse directive, which animates the height of an element when it is shown or hidden via x-show. It's designed for accordions, FAQ sections, and expandable content.

Installation

Code

npm install @alpinejs/collapse

import collapse from '@alpinejs/collapse'
Alpine.plugin(collapse)

Basic Example

Code

<div x-data="{ expanded: false }">
  <button @click="expanded = !expanded">Toggle</button>
  <div x-show="expanded" x-collapse>
    <p>Lots of content that will smoothly expand and collapse.</p>
  </div>
</div>

With Duration

You can customise the animation duration using modifiers.

Code

<div x-collapse.duration.500ms>

💡 Tip

For the best performance, avoid collapsing elements with variable height that contain many nested elements. Try to keep the collapsed container simple.

Helpful? Share this page!↑ Back to top