Comment puis-je utiliser les glyphicons Bootstrap pour indiquer dynamiquement l'état du panneau pliable ?

Utilisation des glyphicons Bootstrap pour indiquer l'état d'effondrement

La documentation Bootstrap 3 pour Collapse fournit un exemple qui utilise CSS pour afficher des icônes en chevron pour indiquer l'état de l'effondrement. état des panneaux pliables. Cette solution, cependant, peut ne pas fonctionner parfaitement sur tous les navigateurs.

Une solution plus élégante

Pour créer une solution plus élégante, nous pouvons utiliser les données Bootstrap 3- attribut toggle pour mettre à jour dynamiquement les classes Glyphicon en fonction de l'état d'effondrement :

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>

<div class="panel-group">
<pre class="brush:php;toolbar:false">$('.accordion-toggle').on('click', function (e) {
    var chevron = $(e.target).children('i.glyphicon');
    chevron.toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});

Cette solution utilise jQuery pour basculer la classe Chevron lorsque l'effondrement est déclenché. La classe glyphicon-chevron-down est ajoutée lorsque le panneau est ouvert, tandis que la classe glyphicon-chevron-up est ajoutée lorsque le panneau est réduit. Cela fournit une indication dynamique et réactive de l’état d’effondrement.