ブートストラップ グリフィコンを使用して、折りたたみ可能なパネルの状態を動的に示すにはどうすればよいですか?

折りたたみ状態を示すブートストラップ グリフィコンの使用

折りたたみに関する Bootstrap 3 ドキュメントには、CSS を使用して山形アイコンを表示し、折りたたみ状態を示す例が記載されています。折りたたみパネルの様子。ただし、このソリューションはすべてのブラウザで完全に機能するとは限りません。

よりエレガントなソリューション

よりエレガントなソリューションを作成するには、Bootstrap 3 データを使用できます。折りたたみに基づいて Glyphicon クラスを動的に更新する toggle 属性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');
});

このソリューションは、折りたたみがトリガーされたときに jQuery を使用して Chevron クラスを切り替えます。 glyphicon-chevron-down クラスはパネルが開いているときに追加され、glyphicon-chevron-up クラスはパネルが折りたたまれているときに追加されます。これにより、折りたたみ状態の動的かつ応答性の高い表示が提供されます。