I'm running into a similar issue as this question, in that I need the data-toggle
option on a button to take two parameters.
I'm making a multi-card collapse with radio buttons. I.e., we have three options. When an option is selected, any open cards are collapsed, and the selected card is un-collapsed. What I'd also like is the selected button to stay selected.
<button href="#option1" class="btn btn-outline-primary" data-toggle="collapse">Option 1</button>
<button href="#option2" class="btn btn-outline-primary" data-toggle="collapse">Option 2</button>
<button href="#option3" class="btn btn-outline-primary" data-toggle="collapse">Option 3</button>
<div id="parent">
<div id="option1" class="collapse panel" data-parent="#parent">
<div class="card card-body">
Details of option 1
</div>
</div>
<div id="option2" class="collapse panel" data-parent="#parent">
<div class="card card-body">
Details of option 2
</div>
</div>
<div id="option3" class="collapse panel" data-parent="#parent">
<div class="card card-body">
Details of option 3
</div>
</div>
</div>
The trouble is, you can only specify one option to data-toggle
, so when the buttons are clicked at the moment, they don't go into their active state, which would happen if I could specify something like data-toggle="collapse button"
Unfortunately, all the searching I've done for two data toggle parameters only leads to people asking about adding tooltips to buttons. Is there any way in bootstrap of changing the button's state while also using it to collapse elements?