Collapsible

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

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.

</> Show code

On any content

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

Link 1 Collapsible

Sublink 1 Sublink 2 Sublink 3 Sublink 4

Link 2

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
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.

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.