CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap-3
Mohamad Kaakati
Mohamad Kaakati

Reputation: 388

Bootstrap 3 collapse change Active state

I have a collapse panel on Bootstrap v3 and I would like to change the Active Panel Background Color by applying a new Class to it with Javascript or jQuery.

Here is my Panel

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                    Panel Title Name
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                <a href="#" class="list-group-item"></i>Link</a>
                <a href="#" class="list-group-item"></i>Link</a>
                <a href="#" class="list-group-item"></i>Link</a>
            </div>
        </div>
    </div>
</div>

I would like to apply the active state to .panel-heading when it's open, i tried lots of things, but none has worked for me, I appreciate your help and Thanks in Advance.

====================================== UPDATE ==============================

I managed to apply a class with this:

$('#accordion > .panel').on('show.bs.collapse', function (e) {
$('#accordion').find('.panel-heading').addClass("active-panel");
});

but it's applying the class to all the panels in my page, how can I fix the Java Selector ?

Upvotes: 2

Views: 6446

Answers (1)

Shaunak D
Shaunak D

Reputation: 20646

Try using $(this) :Demo Fiddle

$('#accordion > .panel').on('show.bs.collapse', function (e) {
    $(this).find('.panel-heading').addClass("active-panel");
});

Upvotes: 2

Related Questions