Menu
How can I add "active" class to open Bootstrap 3 accordion item? In my example id adds "active" but does't remove from other elements. I'm using Bootstrap 3
<div class="panel-group accordions" id="accordion1">
<div class="panel panel-custom">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
....
</div>
</div>
</div>
...
</div>
jQuery('.accordions .panel-heading a[data-toggle="collapse"]').on('click', function () {
$('.accordions').find(jQuery('.panel-heading a[data-toggle="collapse"]')).removeClass('actives');
$(this).addClass('actives');
});
548
If you'd like it to default open, add the additional class show . To add accordion-like group management to a collapsible area, add the data attribute data-parent="#selector" . Refer to the demo to see this in action.
Go to the Accordion module settings to the Advanced tab and open the CSS ID & Classes toggle and place the custom class “pa-accordion” into the CSS Class input field.
How do you close one accordion when another opens? open accordian > at right side go to accordian seting > scrol down to Expand/Collapse Accordion Option On Page Load > choose Hide/close All Accordion..
Accordion Item #1It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.
Remove jQuery from this line of code:
$('.accordions').find(jQuery('.panel-heading a[data-toggle="collapse"]')).removeClass('actives');
Use like this:
$('.accordions').find('.panel-heading a[data-toggle="collapse"]').removeClass('actives');
You can also do like this:
jQuery('.accordions .panel-heading a[data-toggle="collapse"]').on('click', function () {
jQuery('.accordions .panel-heading a[data-toggle="collapse"]').removeClass('actives');
$(this).addClass('actives');
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
