Home Documentation
Getting started General
Components
Forms
Utilities
Check changelog.
0.5.3

Collapsible

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.

Options

Property Default value Description
animationDelay 300 Opening and closing animation delay 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.
autoCloseOtherCollapsible true Closes other collapsible when this Collapsible instance is opened.

Methods

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

Events

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