CODEWITHSUNDEEP
javascriptjqueryonclickclicktoggle
triplethreat77
triplethreat77

Reputation: 1296

Toggle 2 classes at once?

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

Upvotes: 1

Views: 130

Answers (2)

Kyle Paulsen
Kyle Paulsen

Reputation: 1006

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.

Upvotes: 0

adeneo
adeneo

Reputation: 318182

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

Upvotes: 3

Related Questions