Boostrap 3 accordion with chevron and bar color change

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/