A lightweight and flexible collapse component for Alpine.js, powered by Flexilla
Alpine Collapse is an Alpine.js wrapper around the Flexilla Collapse component, providing an easy-to-use directive for creating collapsible elements in your Alpine.js applications. It maintains the core functionality of Flexilla while integrating seamlessly with Alpine.js's reactive system.
- 🪶 Lightweight implementation
- 🎨 Highly customizable
Include the following <script> tag in the <head> of your document, just before Alpine.
<script src="https://cdn.jsdelivr.net/npm/@flexilla/alpine-collapse@latest/dist/cdn.min.js" defer></script>npm install @flexilla/alpine-collapseAdd the x-f-collapse directive to your project by importing the package before starting Alpine:
import Alpine from 'alpinejs';
import CollapsePlugin from '@flexilla/alpine-collapse';
Alpine.plugin(CollapsePlugin);
Alpine.start();Create a collapsible element using the x-f-collapse directive and trigger it with a button:
<button data-collapse-trigger data-target="collapse1"
class="bg-zinc-800 text-white px-4 py-2 rounded-lg text-sm">
Trigger collapse
</button>
<div x-f-collapse x-data id="collapse1"
class="tansition-[height] duration-300 ease-linear overflow-hidden w-full h-0 data-[state=open]:h-auto">
<div
class="rounded-md w-full bg-zinc-100/50 dark:bg-zinc-900/50 border border-gray-200 dark:border-gray-800 p-4 inline-flex overflow-hidden">
<p class="text-gray-700 dark:text-gray-300">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laboriosam, dolorum, incidunt facilis quasi
non ea mollitia odio, iure adipisci
</p>
</div>
</div>For detailed information about customization options, animations, and advanced features, please refer to the Flexilla Collapse documentation.
Copyright (c) 2025 Johnkat MJ and contributors.
Licensed under the MIT license, see LICENSE for details.