I'm exploring the use of JavaScript to display or hide a collapsible element without toggling between the two states. In other words, I want to prevent the toggle functionality.
According to the information provided in the documentation at https://getbootstrap.com/docs/5.0/components/collapse/#via-javascript, it's suggested that with the following code snippet, toggling between shown and hidden can be achieved:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: true
})
If we change the 'toggle' attribute to false, the behavior stops as expected. However, there is mention of using the 'show' and 'hide' properties within an object passed as the second argument to enable/disable these actions:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false,
show: true,
hide: false
})
But when attempting to utilize these options individually, only the 'toggle' option seems to work. Upon inspecting the Bootstrap JavaScript source code, it appears that the library checks the status of the 'toggle' parameter:
if (_this._config.toggle) {
_this.toggle();
}
However, there doesn't seem to be a similar check for 'show' and 'hide', indicating that these options may not have any effect when utilized within the bootstrap.Collapse() method.
Do you believe my understanding is accurate, that the 'show' and 'hide' options do not function properly with bootstrap.Collapse()? If not, could you provide guidance on what might be causing this issue?