Toggle 2 classes at once?

Question

Afternoon, fellow overflowers. I have a relatively simple question but cannot wrap my head around what needs to be done. So I am using glyphicons/font awesome as collapsible arrows and need the up and down arrows to swap on click. So on clicking the tag, remove down and add up. On the next click remove up and add down classes. Any ideas? Thanks in advance.

$('.accordion-toggle > i').click(function(){
    var open = $(this).removeClass('fa-chevron-down').addClass('fa-chevron-up');
    $.toggle('open');
});

Answer 1

toggleClass does that. If you start out with one class, that class will be removed (toggled) and the class the element doesn't have will be added, hence toggleClass

$('.accordion-toggle > i').click(function(){
    var open = $(this).toggleClass('fa-chevron-down fa-chevron-up');
    $.toggle('open');
});

Answer 2

You can check if it has a class first with:

if ($(this).hasClass("fa-chevron-down")) {
    // add and remove classes
} else {
    // add and remove classes
}

and then remove and add the appropriate classes in the if statement.