Incorporating Bootstrap 5.1, I have a set of buttons that trigger the display or hide 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>
Nevertheless, there is no visual indication for users when a button is activated or not. I want the buttons to function as toggle switches. According to the documentation, this can be achieved by setting
data-bs-toggle="button"
However, I already use this attribute to hide/show content with
data-bs-toggle="collapse"
How can I incorporate both functionalities? I attempted
data-bs-toggle="button,collapse"
but it did not yield the desired results
Update
I followed David's suggestion but encountered difficulty in maintaining the toggle. Instead, I renamed the button and added the following Javascript snippet to the page
let movementsSection = document.getElementById('movements_id')
let movementsButton = document.getElementById('show_movements_button')
if(movementsSection!=null)
{
movementsSection.addEventListener('show.bs.collapse', function() {movementsButton.innerText='Hide Movements';});
movementsSection.addEventListener('hide.bs.collapse', function() {movementsButton.innerText='Show Movements';});
}
This solution functions adequately, except for the hardcoded button names in the Javascript, which could pose challenges during internationalization of the code
The html code is dynamically generated, while the Javascript is not. It would be advantageous to implement a solution within the html itself