How Can I Use Bootstrap Glyphicons to Dynamically Indicate Collapsible Panel State?

Using Bootstrap Glyphicons to Indicate Collapse State

The Bootstrap 3 documentation for Collapse provides an example that uses CSS to display chevron icons to indicate the state of collapsible panels. This solution, however, may not work perfectly across all browsers.

A More Elegant Solution

To create a more elegant solution, we can use the Bootstrap 3 data-toggle attribute to dynamically update the Glyphicon classes based on the collapse state:

<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');
});

This solution uses jQuery to toggle the Chevron class when the collapse is triggered. The glyphicon-chevron-down class is added when the panel is open, while the glyphicon-chevron-up class is added when the panel is collapsed. This provides a dynamic and responsive indication of the collapse state.