更改手风琴折叠时的图标方向

Question

I have this JSFiddle which includes a Bootstrap Accordion embedded inside another Accordion, the issue is that the Chevron to the right does not now behave as expected.

As you can see by the code below, the chevron changes direction when collapse is triggered, however, now it is in an embedded accordion this doesn't appear to be the solution.

$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-chevron-down").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-chevron-up").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
});

Answer 1

I usually prefer to do this with CSS - less messy than trying to detect which item opened/closed when you are nesting, or have multiple on a page.

1) Add the class 'collapsed' to your accordion headings if they are closed by default (bootstrap toggles this class, but if you don't have it present when the page loads, it doesn't get added until you open and then close an accordion item).

2) Get rid of the JS and add this CSS:

.panel-heading.collapsed .glyphicon-chevron-down {
  transform:rotateX(0deg);
}
.panel-heading .glyphicon-chevron-down {
  transition:transform .5s;
  transform:rotateX(180deg);
}

If you don't like the flip animation, just get rid of the transition rule, but I like to think it adds a little something.

http://jsfiddle.net/rr7oggLv/6/