CODEWITHSUNDEEP
jquerytwitter-bootstrap-3
user3214264
user3214264

Reputation: 69

How add "active" class to open Bootstrap 3 accordion item?

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');
 });

Upvotes: 5

Views: 13843

Answers (1)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

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');
 });

Upvotes: 8

Related Questions