Using Bootstrap 5.1 I have some buttons that hide/show some content using the collapse plugin
<div class="col m-2">
<button type="btn" class="btn btn-outline-primary m-1"
data-bs-toggle="collapse" data-bs-target="#focus_id">Focus
</button>
</div>
However there is nothing to indicate to the user if a button has been pressed or not, I want them to be toggle buttons. According to the documentation this is done by setting
data-bs-toggle="button"
but I am already using this to hide/show content with
data-bs-toggle="collapse"
So how do I do both, I tried
data-bs-toggle="button,collapse"
but that didn't work
However there is nothing to indicate to the user if a button has been pressed or not
Well, the fact that the collapsible section is hidden or shown should be enough of an indicator!
Anyways, I guess since the two components share the same attribute you should go the manual way and the easiest way - at least from a maintenance point of view, is adding an eventListener to your collapsible section:
let collapsibleSection = document.getElementById('mySection');
let toggleButton = document.getElementById('myButton');
collapsibleSection.addEventListener('hidden.bs.collapse', function() {
if (toggleButton.classList.contains('my-active-css-class') {
toggleButton.classList.add('your-inactive-css-class');
toggleButton.classList.remove('your-active-css-class');
}
});
collapsibleSection.addEventListener('shown.bs.collapse', function() {
if (toggleButton.classList.contains('my-inactive-css-class') {
toggleButton.classList.add('your-active-css-class');
toggleButton.classList.remove('your-inactive-css-class');
}
});
Please note that these two events are fired after the transition completion. If you want your code to be triggered as soon as the user clicks on the button, use the show.bs.collapse and the hide.bs.collapse events instead See relevant part of documentation; beware though that method calls on transitioning component will be ignored (relevant docs).