javascript - Programmatically toggle Bootstrap 5 collapse component - Stack Overflow

admin管理员组

文章数量:1287878

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 ponent?

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 ponent?

• javascript
• twitter-bootstrap
• bootstrap-5

Share Improve this question Follow edited Dec 3, 2022 at 8:34 lonix asked Dec 3, 2022 at 7:18 lonixlonix 21.1k2929 gold badges133133 silver badges275275 bronze badges 2

• Try to select the element using an id instead of using the collapse class. E.g.: document.querySelector('#my-collapse-element'); – Dimitris Maragkos Commented Dec 3, 2022 at 7:31
• @DimitrisMaragkos Thanks! That isn't the problem though, I can find the element without problem (element is not null), but getInstance returns null. Also that code works as is, once I manually click the collapse button. Weird. – lonix Commented Dec 3, 2022 at 8:05

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

I think when using data attributes, the bootstrap ponent 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();

The code below insures that collapse instance is not null:

let element = document.querySelector('#my-collapse');
// try to get collapse instance
let bsCollapse = bootstrap.Collapse.getInstance(element);
// if the instance is not yet initialized then create new collapse
if (bsCollapse === null) {
    bsCollapse = new bootstrap.Collapse(element, {
        toggle: false   // this parameter is important!
    })
}
bsCollapse.show();

Bootstrap Collapse by default runs some 'auto-toggle' in constructor.

Add some config that turns this first toggling of solves the issue:

let element = document.querySelector('#my-collapse');
bootstrap.Collapse.getOrCreateInstance(element, { toggle: false });

---

See https://github./twbs/bootstrap/blob/688bce4fa695cc360a0d084e34f029b0c192b223/js/src/collapse.js#L97-L99

    if (this._config.toggle) {
      this.toggle()
    }

本文标签： javascriptProgrammatically toggle Bootstrap 5 collapse componentStack Overflow