Toggle visibility of content sections with smooth height transitions.

Demo

Installation

Install the component

  1. Install the component

    Shell
    php artisan flexi:add collapse
  2. Install dependencies

    This component requires JS. By default we're using our own Interactive Component Library Flexilla .
    Shell
    npm i @flexilla/collapse
  3. Usage

    1. With Alpine/Livewire
    2. Add plugin in app.js

      flexilla.js
      import { CollapsePlugin } from "./plugins/collapse";
      
      Alpine.plugin(CollapsePlugin)
    3. Without Alpine
    4. Initialize accordion in app.js

      flexilla.js
      import { Collapse } from "@flexilla/collapse"
      
      // init collapse for all Element with data-app-collapse attribute
      Collapse.autoInit('[data-app-collapse]') 

Close height

You can determine the minimum height for closing collapse