The collapsible allows you to hide sub elements of a container, and toggle their visibility.

On any content

To use a collapsible, you must have a button or an element with the .collapsible-trigger class and a data-target="" attribute who point on the targeted collapsible id.
The collapsible id must be the same as data-target.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error, soluta asperiores nobis, iusto tenetur illum sunt modi quisquam blanditiis aspernatur sequi minus corporis quibusdam quam voluptatem! Cumque nemo debitis porro.

In sidenav

Collapsibles are usefull to create an interactive menu into a sidenav. Try it into our demo sidenav below.
Note that you need to wrap the collapsible element into a div to make it work, as in the example code below.

JavaScript initialization

Once HTML was setup, you can activate the collapsible with this simple code.
Just pass the id of your collapsible that you want to activate.

To know all the ways to initialize a JS component, please read the JS Init page.


Property Default value Description
animationDuration 300 Opening and closing animation duration in ms.
Specials options for sidenav use
Property Default value Description
activeClass true Adds .active class to collapsible trigger and collapsible container when a child (sublink) has class="active".
activeWhenOpen true Adds .active class to collapsible trigger when the collapsible is open.
Automatically removed when closed.
autoClose true Closes other collapsible when this Collapsible instance is opened.


Method Description
.open() Open collapsible
.close() Close collapsible


Event Description
ax.collapsible.setup Event sent when the collapsible has been setup. Event sent when the open() method is called.
ax.collapsible.close Event sent when the close() method is called.