ALL glyphicon-chevronの方向をページの上または下に変更します

Question

ページに複数のアコーディオンがあり、ユーザーはglyphicon-chevron-upまたはglyphicon-chevron-downをクリックして個別に展開または折りたたむことができます。 は、このコードは私のために働いていることを行うためには：

$('[data-toggle="collapse"]').click(function() { 
    $(this).children(".glyphicon").toggleClass("glyphicon-chevron-up glyphicon-chevron-down"); 
}); 

私はまた、「すべてを折りたたむ」とクリックした場合は、上のすべてのアコーディオンを拡大/崩壊するという「すべてを展開」というページ上に2つのボタンがあります私は助けが必要です： このコードはすべてのグリフコンシェブロンアイコンを上下に反転させるものではありません。どうすればその機能を追加できますか？

$("#showAllPanels").click(function (e) { 
    e.preventDefault(); 
    $(".panel-collapse").collapse("show"); 
}); 

$("#hideAllPanels").click(function (e) { 
    e.preventDefault(); 
    $(".panel-collapse").collapse("hide"); 
}); 

Answer 1

次のようにaddClass()とremoveClass()メソッドを使用することができます。

$("#showAllPanels").click(function (e) { 
    e.preventDefault(); 
    $(".panel-collapse").collapse("show"); 
    $(".glyphicon-chevron-down").addClass("glyphicon-chevron-up").removeClass("glyphicon-chevron-down"); 
}); 

$("#hideAllPanels").click(function (e) { 
    e.preventDefault(); 
    $(".panel-collapse").collapse("hide"); 
    $(".glyphicon-chevron-up").addClass("glyphicon-chevron-down").removeClass("glyphicon-chevron-up"); 
});