Bootstrap de l'Accordéon à la navigation avec la liste déroulante de l'icône de chevron

J'ai un bootstrap nav-tabs nav-empilés liste qui a besoin d'utiliser l'accordéon à l'effondrement de toutes les listes sauf pour le plus récemment cliqué, ou avec des enfants actifs.

J'ai ce travail quelque peu, mais n'arrive pas à trouver comment obtenir le chevron pour changer de direction, à moins cliqué.

J'avais déjà eu ce seulement mis en place pour faire de l'effondrement, et non pas de l'accordéon effondrement... donc besoin d'un peu de javascript conseils pour obtenir pleinement fonctionnel.

jsfiddle: http://jsfiddle.net/utcwebdev/NBcmh/17/
(utilise des fichiers d'amorce de balisage, ainsi qu'une housse bootswatch thèmes css)

Voici le balisage:

<ul id="sidenav01" class="accordion nav nav-department nav-tabs nav-stacked">
<li>
<a href="department-mathematics.php"><i class="icon-home"></i> Mathematics</a> 
</li>
<li>
<a href="#li02" data-toggle='collapse' data-target='#subnav01', data-parent='#sidenav01' class="accordion-toggle collapsed"><i class="icon-chevron-up pull-right"></i>Programs </a>
<ul id="subnav01" class="nav nav-list collapse">
<li><a href="#1"><i class="icon-home"></i> Programs Home</a></li>
<li><a href="#2">Undergraduate Program</a></li>
<li><a href="#3">Graduate Program</a></li>
<li><a href="#4">Undergraduate Program</a></li>
<li><a href="#5">Math Plaza</a></li>
<li><a href="#6">UTeaChattanoga</a></li>
<li><a href="#7">Placement Criteria</a></li>
<li><a href="#8">Step Ahead Math</a></li>
</ul>
</li>
<li>
<a href="#page">A Single Math Page</a> 
</li>
<li>
<a href="#li03" data-toggle='collapse' data-target='#subnav02', data-parent='#sidenav01' class="accordion-toggle collapsed"><i class="icon-chevron-up pull-right"></i>Student Resources</a>
<ul id="subnav02" class="nav nav-list collapse">
<li><a href="#pimu">Pi Mu Epsilon</a></li>
<li><a href="#schol">Scholarships and Awards</a></li>
<li><a href="#links">Math Links</a></li>
<li><a href="#advise">Advisement</a></li>
</ul>
</li>
<li>
<a href="directory.php"><i class="icon-group"></i> Staff Profiles</a> 
</li>
</ul>

Et voici le javascript:

$(document).on('click', '.accordion-toggle', function(event) {
event.stopPropagation();
var $this = $(this);
var parent = $this.data('parent');
var actives = parent && $(parent).find('.collapse.in');
//From bootstrap itself
if (actives && actives.length) {
hasData = actives.data('collapse');
//if (hasData && hasData.transitioning) return;
actives.collapse('hide');
}
var target = $this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, ''); //strip for ie7
$(target).collapse('toggle');
});

OriginalL'auteur PlayGod | 2013-03-26