Bootstrap 3 Collapse afficher l'état avec l'icône Chevron

Question

À l'aide de la base exemple tiré du Bootstrap 3 Javascript de la page d'exemples pour l'Effondrement, J'ai été en mesure de montrer l'état de l'effondrement à l'aide de chevron icônes.

J'ai ce travail à l'aide de:

$('#accordion .accordion-toggle').click(function (e) {
    var chevState = $(e.target).siblings("i.indicator").toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
    $("i.indicator").not(chevState).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});

Cela fonctionne (pas entièrement testé dans tous les navigateurs), mais je me demandais si il y a une solution plus élégante?

Idéalement, je voudrais utiliser la fonction de base, mais je ne suis pas sûr de la façon d'obtenir les mêmes résultats avec elle.

$('#accordion').on('hidden.bs.collapse', function () {
    //do something...
})

Voici une version de travail dans jsfiddle.

Answer 1

Pour le code HTML suivant (à partir données d’amorçage 3 exemples) :

Le style suivant fonctionnera :

Effet visuel :

Answer 2

Vous pouvez utiliser ce genre de code :

= > JsFiddle de travail

Answer 3

Merci à biggates et steakpi. Comme réponse à la question Dreamonic, j’ai fait quelques changements pour le rendre cliquables tous les en-têtes (non seulement la chaîne de titre et gluphs) et a décollé le soulignement du lien. Pour forcer une icônes apparaissent sur la même ligne que à la fin des instructions CSS, j’ai ajouté h4. Voici le code modifié :

Et le CSS mis à jour le :

Answer 4

exemple simple de travail

• obtenir l’état corporel montré/caché
• se rendre à son parent att
• Get a trouver l’icône
• changer d’icône

Entrez simple

HTML:

JavaScript