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.
<button data-target="example-collapsible" class="btn rounded-1 press primary collapsible-trigger mx-auto">
  Toggle
</button>
<div class="collapsible" id="example-collapsible" data-ax="collapsible">
  <div class="primary">
    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.
  </div>
</div>

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.

<div id="example-sidenav" class="sidenav shadow-1 primary">
  <div class="sidenav-header">
    <button data-target="example-sidenav" class="sidenav-trigger"><i class="fas fa-times"></i></button>
    <img class="sidenav-logo dropshadow-1" src="your_img_path" alt="Axentix Logo" />
  </div>
  <a href="#" class="sidenav-link">Link 1</a>
  <a href="#" class="collapsible-trigger sidenav-link" data-target="example-collapsible">Collapsible</a>
  <div>
    <div class="collapsible" id="example-collapsible" data-ax="collapsible">
      <a href="#" class="active sidenav-link">Sublink 1</a>
      <a href="#" class="sidenav-link">Sublink 2</a>
      <a href="#" class="sidenav-link">Sublink 3</a>
      <a href="#" class="sidenav-link">Sublink 4</a>
    </div>
  </div>
  <a href="#" class="sidenav-link">Link 2</a>
</div>

<button data-target="example-sidenav" class="btn rounded-1 press primary sidenav-trigger mx-auto">
  Open sidenav
</button>

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.

// NOTE: this is NOT to be used if data-ax="collapsible" is set in your HTML
let collapsible = new Axentix.Collapsible('#example-collapsible');

// With options
let collapsible = new Axentix.Collapsible('#example-collapsible', {
  animationDuration: 300
});
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
// NOTE: this is NOT to be used if data-ax="collapsible" is set in your HTML
let collapsible = new Axentix.Collapsible('#example-collapsible', {
  animationDuration: 400,
  sidenav: {
    activeWhenOpen: false
  }
});
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#

// NOTE: this is NOT to be used if data-ax="collapsible" is set in your HTML
let collapsible = new Axentix.Collapsible('#example-collapsible');

// Syntax : collapsible.{method}
collapsible.open();
Method Description
.open() Open collapsible
.close() Close collapsible

Events#

// Listen to all collapsible instances
document.addEventListener('ax.collapsible.open', function() {
  // open event !
});

// Listen to only one collapsible instance
let collapsibleQuery = document.querySelector('#example-collapsible');
collapsibleQuery.addEventListener('ax.collapsible.open', function() {
  // open event only on #example-collapsible
});
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.