JavaScript API

Javascript API documentation
Introduction

This component comes with a JavaScript part to handle interaction.

All example are in ES6 syntax. You can use Babel Compiler to transform the code into ES5.
Options

You can easily manage the component behavior by passing an object of options to the constructor.

Name Default value
allowMultiple false
Note: you can set options direclty on the DOM Element via data attributes.
Example for allow-multiple option :
<div data-allow-multiple="false">
API
bulmaCollapsible

bulmaCollapsible : class
constructor

Instanciate the component based on the element provided and register the instance into .bulmaCollapsible property of the element.


Parameters
Node element (can be a selector string - must target only one node - or a DOM node) on which attach the component
Component options. These options are merged with default options and options set via element data-attribute.
Example
const bulmaCollapsibleElement = new bulmaCollapsible('#to-collapse');

// Access to the bulmaCollapsible instance from DOM
const collapsibleElement = document.getElementById('#to-collapse');
if (collapsibleElement) {
  const collapsibleInstance = collapsibleElement.bulmaCollapsible();
}
attach : Array
constructor

Constructor shortcut with possibility to pass a String, a Node or a NodeList as a selector so we can instantciate multiple instances at once. Return an array of all instances. Note that each instance is link to the related DOM node under .bulmaCollapsible property.


Parameters
Selector (can be a selector string - can target multiple nodes - or a DOM node or a DOM nodes list) on which attach the component
Component options. These options are merged with default options and options set via element data-attribute.
Example
// Return an array of bulmaCollapsible instances (empty if no DOM node found)
const bulmaCollapsibleInstances = bulmaCollapsible.attach('.is-collapsible');

// Loop into instances
bulmaCollapsibleInstances.forEach(bulmaCollapsibleInstance => {
    // Check if current state is collapsed or not
    console.log(bulmaCollapsibleInstance.collapsed());
});
collapsed : Boolean
public

Check if element is collasped or not. Return true if element is collasped else false.


Example
// Find DOM node from ID
const bulmaCollapsibleElement = document.getElementById('to-collapse');
if (bulmaCollapsibleElement) {
  // Instanciate bulmaCollapsible component on the node
  new bulmaCollapsible(bulmaCollapsibleElement);

  // Call method directly on bulmaCollapsible instance registered on the node
  bulmaCollapsibleElement.bulmaCollapsible('collapsed');
}
expand
public

Open the collapsed element. If allowMultiple option is set to True then collapse all other bulmaCollapsible elements within the same parent node.


Example
// Find DOM node from ID
const bulmaCollapsibleElement = document.getElementById('to-collapse');
if (bulmaCollapsibleElement) {
  // Instanciate bulmaCollapsible component on the node
  new bulmaCollapsible(bulmaCollapsibleElement);

  // Call method directly on bulmaCollapsible instance registered on the node
  bulmaCollapsibleElement.bulmaCollapsible('expand');
}
open
public

Shortcut to expand method


collapse
public

Collaspe the element.


Example
// Find DOM node from ID
const bulmaCollapsibleElement = document.getElementById('to-collapse');
if (bulmaCollapsibleElement) {
  // Instanciate bulmaCollapsible component on the node
  new bulmaCollapsible(bulmaCollapsibleElement);

  // Call method directly on bulmaCollapsible instance registered on the node
  bulmaCollapsibleElement.bulmaCollapsible('collapse');
}
close
public

Shortcut to collapse method


_init
inner

Proceed to component initialization and set initial state (expand or collapse) based on the presence of the is-active class, initialize parent node to limit multiple expanded elements (accordion-like) and will attach triggerClick listener on each trigger linked to the current collapsible element.


onTriggerClick
inner

Called on trigger click to toggle bulmaCollapsible element (expand it if collapsed, collapse it if expanded)


Parameters
DOM Event Object reference
Events

You can interact with component instance with events.

Name Description Example
before:expand Before expanding (opening) element 
// Find DOM node from ID
const CollapsibleElement = document.getElementById('to-collapse');
if (CollapsibleElement) {
  // Instanciate Collapsible component on the node
  new Collapsible(CollapsibleElement);

  // Call method directly on Collapsible instance registered on the node
  CollapsibleElement.bulmaCollapsible().on('before:expand', (e) => {
    console.log('Before expand');
  });
}
after:expand After expanding (opening) element 
// Find DOM node from ID
const CollapsibleElement = document.getElementById('to-collapse');
if (CollapsibleElement) {
  // Instanciate Collapsible component on the node
  new Collapsible(CollapsibleElement);

  // Call method directly on Collapsible instance registered on the node
  CollapsibleElement.bulmaCollapsible().on('after:expand', (e) => {
    console.log('After expand');
  });
}
before:collapse Before collapsing (closing)) element 
// Find DOM node from ID
const CollapsibleElement = document.getElementById('to-collapse');
if (CollapsibleElement) {
  // Instanciate Collapsible component on the node
  new Collapsible(CollapsibleElement);

  // Call method directly on Collapsible instance registered on the node
  CollapsibleElement.bulmaCollapsible().on('before:collapse', (e) => {
    console.log('Before collapse');
  });
}
after:collapse After collapsing (closing) element 
// Find DOM node from ID
const CollapsibleElement = document.getElementById('to-collapse');
if (CollapsibleElement) {
  // Instanciate Collapsible component on the node
  new Collapsible(CollapsibleElement);

  // Call method directly on Collapsible instance registered on the node
  CollapsibleElement.bulmaCollapsible().on('after:collapse', (e) => {
    console.log('After collapse');
  });
}