Collapsible not working on click

[Elvandarysalys]

Symptoms:

Installation happened without hiccup, IDE and autocompletion recognize the differents classses

However, event following the tutorial , thing act like a classic in page link (jumps to the anchor instead of collapsing/expanding)

Versions and installation

I installed following the instructions in the documentation. My project is using Yarn and Webpack.

Running : yarn add @creativebulma/bulma-collapsible

Add the import in the scss file:

@import "~@creativebulma/bulma-collapsible";

Since I am using webpack, I choosed to import the javascript in in the app.js that webpack will compile:

// any CSS you import will output into a single css file (app.css in this case)
import './styles/bulma_style.scss';
import './styles/app.scss';

// start the Stimulus application
import './bootstrap';

// import javascript dependencies
import bulmaCollapsible from '@creativebulma/bulma-collapsible';

I also tried with the cdn and even including it directly using the webpack.js file, none worked.

My versions are:

• Bulma 0.9.3
• Bulma-collapsible 1.0.4

WorkAround

I am not a javascript expert (and clearly not a css one :D ) so i did not try really hard to understand where the bug came from, however, I build a small workaround, hopefully it can help solve the problem or help someone while this is fixed:

// import javascript dependencies
import bulmaCollapsible from '@creativebulma/bulma-collapsible';

const collapsibleTriggers = document.getElementsByClassName('collapsible')
Array.from(collapsibleTriggers).forEach(function(item) {
  let target = document.getElementById(item.dataset.target)
  let collapsibleInstance = target.bulmaCollapsible();

  item.addEventListener("click", function(){
    if (collapsibleInstance.collapsed()){
      collapsibleInstance.expand()
    }else{
      collapsibleInstance.collapse()
    }
  });
});

Good luck everyone

[rodolfofranco]

For someone struggling with this, I found out that in order for the collapsible to behave correctly (not working as a page link), we have to instanciate it first.

// Return an array of bulmaCollapsible instances (empty if no DOM node found)

const bulmaCollapsibleInstances = bulmaCollapsible.attach('.is-collapsible');

We have to run that script after the DOM has been rendered.