Reputation: 388
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
Reputation: 20646
Try using $(this)
:Demo Fiddle
$('#accordion > .panel').on('show.bs.collapse', function (e) {
$(this).find('.panel-heading').addClass("active-panel");
});
Upvotes: 2