One thing I want to achieve is changing the background color of a div element with the class .panel-heading to blue if the inner div element with the class .panel-collapse inside the parent div with the class .panel has a class of in. The framework I am using for this functionality is Bootstrap accordion.
This is an example snippet of my HTML code:
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Lipsum set dolor
<span class="pull-right glyphicon glyphicon-minus"></span>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since
</div>
</div>
</div><!-- end panel -->
I attempted a simple solution like this, however it did not produce the desired effect:
if ($('.panel-collapse').hasClass('in')) {
$(this).closest('.panel-heading').css("background", "blue");
}
else {
$(this).closest('.panel-heading').css("background", "red");
}