Mohamad Kaakati Mohamad Kaakati - 3 months ago 19
Javascript Question

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 ?

Answer

Try using $(this) :Demo Fiddle

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