Bootstrap 5 collapse show/hide not working when invoked with JS

user_1846118 0
Viewed 3880

I am attempting to use javascript to show or hide a collapsable element but not both. (that is to say i dont want toggle to be enabled)

according to the documentation https://getbootstrap.com/docs/5.0/components/collapse/#via-javascript

i can do something like this to trigger toggling between shown and hidden

    var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: true
})

of course if i change toggle to false it stops it from doing anything - as expected. however it also says i can use the show and hide properties on an object passed as the second array to enable/disable these behaviors

like so

    var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false,
  show: true,
  hide: false
})

but if i try to use these options only toggle works

I looked at the BS js and found that it does check the status of toggle

if (_this._config.toggle) {
    _this.toggle();
  }

however there is no equivalent for show and hide which suggests to me that the show and hide options of the bootstrap.Collapse() object do nothing.

Am I correct in my belief that the show and hide options dont work when using bootstrap.Collapse()?

If no what am i doing wrong.

bootstrap-5 twitter-bootstrap javascript
2 Answers

toggle is both a config option, and a method .toggle()

show() and hide() are methods, not config options.

Therefore, using show and hide and as config options does nothing...

var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false,
  show: true, //useless
  hide: false //useless
})

However, show and hide work as methods...

bsCollapse.show()

or

bsCollapse.hide()

Demo

user_1714560

If you want to toggle the collaspe :

new bootstrap.Collapse(myCollapse, {
  toggle: true
});

- toggle option must be true.

=> Toggles the collapsible element on invocation of the instance constructor.

- no nead to point a variable to the collapse instance.

if you want to show or hide the collapse :

var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})

bsCollapse.show();

or

bsCollapse.hide();

- toggle option must be false.

user_104030160
Related