Изменить направление иконки на Accordion Collapse

Question

У меня есть этот JSFiddle, который включает в себя аккордеон Bootstrap, встроенный в другой Аккордеон, проблема в том, что Chevron справа не ведет себя так, как ожидалось.

Как видно из приведенного ниже кода, шеврон меняет направление при запуске collapse, однако теперь он находится в встроенном аккордеоне, и это не похоже на решение.

$('.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

Я обычно предпочитаю делать это с помощью CSS - менее грязной, чем пытаться определить, какой элемент открыт/закрыто, когда вы вложенность, или иметь несколько на одной странице.

1) Добавьте класс 'collapsed' в ваши заголовки аккордеона, если они по умолчанию закрыты (bootstrap переключает этот класс, но если у вас его нет при загрузке страницы, он не добавляется до тех пор, пока вы не открыть, а затем закрыть элемент аккордеона).

2) Избавиться от JS и добавить этот CSS:

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

Если вы не любите покадровую анимацию, просто избавиться от transition правил, но мне нравится думать, что это добавляет немного что нибудь.

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