Collapsibles

Collapsibles are used to enable animated toggle behavior to elements with selected applied classes.

Any div element can be turned into a collapsible element simply by applying a collapse class on the element. Afterwards, the collapsible element can be toggled by using one of the following methods.

Applying a class collapse-open alongside the collapse displays the collapsible element content, which is hidden by default. The triggering action button toggles between the two states depending on the status of the collapsible element - it shows the collapsible element content when it is hidden, or hides it when it it is already visible.

• Usage
  • Via data attributes
  • Via javascript
  • Javascript methods
  • Javascript events

Usage

Collapsible functionality can be enabled and controlled using HTML data attributes or Javascript.

Via data attributes

A collapsible element can be controlled simply by adding a data-toggle="collapse" on a button, along with a data-href="#id" where target is the targeted collapsible element id.

Code output

HTML Markup

Copy<button class="btn btn-main" data-toggle="collapse" data-href="#collapsible-example">Collapsible element toggle</button>
<div id="collapsible-example" class="collapse">
<div class="box pad-md">
  <h3>Collapsible title</h3>
  <p>Collapsible content</p>
</div>
</div>

Via Javascript

Collapsible elements that hold a unique id can be called using Javascript.

Copy$('#id').collapse()

Javascript methods

The following methods are available for collapsible elements that hold a unique id.

Copy$('#id').collapse('toggle')

Copy$('#id').collapse('show')

Copy$('#id').collapse('hide')

Javascript events

The collapsible element component exposes events at specific triggering points to extend component functionality. Each event instance fires as soon as the pre-specified hooks are reached within the Javascript code. The following events are available for the collapsible element component and are linked directly to the collapsible element and not the control triggering elements, like the buttons triggering the collapsible element.

Copy$('#id').on('show.sky.collapse', function(e) {
  // Extend function
});

Copy$('#id').on('shown.sky.collapse', function(e) {
  // Extend function
});

Copy$('#id').on('hide.sky.collapse', function(e) {
  // Extend function
});

Copy$('#id').on('hidden.sky.collapse', function(e) {
  // Extend function
});