Programmatically toggle Bootstrap 5 collapse component

I’m using a boostrap 5 “collapse”, using the data attributes approach. It works as expected. I can click the button to collapse/expand the collapsible items.

The docs state I can toggle the state manually, like so:

let element = document.querySelector('#my-collapse');
bootstrap.Collapse.getInstance(element).toggle();

However that fails, as getInstance returns null.

Strangely, if I click the collapse button, then use that code, it works.

How do I ensure the code works without first “priming” the collapse component?

Answer

I think when using data attributes, the bootstrap component is only created on demand – i.e. when the collapse button is clicked for the first time. That would explain the behaviour I’ve noted above.

So the solution is to use getOrCreateInstance instead:

let element = document.querySelector('#my-collapse');
bootstrap.Collapse.getOrCreateInstance(element).toggle();