Boostrap 3 accordion with chevron and bar color change - twitter-bootstrap-3

Question

based on the solution that work perfectly for the chevron (Bootstrap 3 Collapse show state with Chevron icon):
function toggleChevron(e) {
$(e.target)
.prev('.panel-heading')
.find('i.indicator')
.toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
}
$('#accordion').on('hidden.bs.collapse shown.bs.collapse', toggleChevron);
There is a way to change also the panel class from .panel-default to .panel-primary when then panel is open?
i've this panel setup:
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse6">
<h4 class="panel-title">
<a class="accordion-toggle">PANEL TITLE</a><i class="indicator glyphicon glyphicon-chevron-right pull-right"></i>
</h4>
</div>
<div id="collapse6" class="panel-collapse collapse">
<div class="panel-body">
<fieldset>
...
</fieldset>
</div>
</div>
</div>
thank you so much.

Answer 1

The following code would help. So on click you select the parent element of the target which would be the div tag containing panel-default class and then you just toggle panel-default and panel-primary classes.
function toggleChevron(e) {
$(e.target).parent().toggleClass('panel-default');
$(e.target).parent().toggleClass('panel-primary');
$(e.target)
.prev('.panel-heading')
.find("i.indicator")
.toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);
link: http://jsfiddle.net/saa93/hpzj2z5a/1/