Ändern Sie die Richtung von ALL Glyphicon-Chevron nach oben oder unten auf einer Seite

Question

Ich habe mehrere Akkordeons auf der Seite und Benutzer können auf die Glyphon-Chevron-Up oder Glyphicon-Chevron-Down klicken, um sie einzeln zu erweitern oder zu reduzieren. Damit dieser Code arbeitet für mich tun:

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

ich zwei Tasten auch auf der „Alles ausblenden“ und „Alle erweitern“ genannt Seite haben, dass, wenn geklickt wird kollabieren/erweitern, um alle Akkordeons auf die Seite und das funktioniert auch OK außer ein Teil, ich brauche Hilfe mit: Dieser Code nicht alle Glyphicon-Chevron-Symbole nach oben oder unten spiegeln. Wie kann ich diese Funktionalität hinzufügen?

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

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

Answer 1

Sie können wie folgt addClass() und removeClass() Methoden.

$("#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"); 
});