removeClass() if it exists

Question

This function adds a rotated class to my button when I click it. The button has an arrow on it which points in the direction the panel has slid.

How could I remove the rotated class when I click the button again?

$("#btnDiv").click(function (){
     $('#slidePanel').toggle( "slide",{direction: 'right'});
     $('#btnDiv').addClass('rotated');
});

Something like this maybe?

if('rotated'){
    removeClass('rotated')
}else{
    addClass('rotated')
}

Sorrento

Answer 1

You can use .toggleClass()

$('#btnDiv').toggleClass('rotated');

That adds it if it's missing, and removes it if it's present. There's also .is() to check for things like that:

if ($('#btnDiv').is('.rotated'))

or more simply:

if ($('#btnDiv').hasClass('rotated'))

Lightfingered

...and if you ever need to check if a class is set: hasClass() : api.jquery.com/hasClass – Decapod

Excellent! What a quick fix! Cheers Pointy! – Sorrento

@Virus721 there's no need to check if all you want to do is add the class; .addClass() won't add it twice. – Lightfingered

Okay, so this question has no reason to be then. – Bergerac

@Bergerac I'm pretty sure that the OP wants to remove the class if it's present, and add the class if it's missing. – Lightfingered

I appreciate the suggestion Virus, but Pointy's worked perfectly for me. – Sorrento

Thanks, this helped with this: $(this).toggleClass('selectedTrack_row').siblings().removeClass('xyzClass'); – Talky

Answer 2

Try this

if($('#btnDiv').hasClass('rotated')){
   $('#btnDiv').removeClass('rotated')
}else{
  $('#btnDiv').addClass('rotated')
}

Coit

Answer 3

Just use .toggleClass() to acheive that.

Byelorussian

Answer 4

$("#btnDiv").click(function (){
    $('#slidePanel').toggle( "slide",{direction: 'right'});
    if($('#btnDiv').hasClass('rotated')){
          $('#btnDiv').removeClass('rotated');
    }
    else{
         $('#btnDiv').addClass('rotated');
    }
  });

Eclogue

Answer 5

if($('#btnDiv').hasClass('rotated')){
   $('#btnDiv').removeClass('rotated')
}else{
   $('#btnDiv').addClass('rotated')
}

Flita

Answer 6

you can you simple swith the class on click

$('.myclassname').on('click', function(){
    $('.myclass h2').toggleClass( 'first_class', 'second_class');
}); 

Perot

Answer 7

You can pass boolean value, as second arg, if the driver of adding or removing a class is based on some true/false.

some.prototype.setSomeMode = function(enabled){
    $('#btnDiv').toggleClass('theclassToAddOrRemove', this.refreshingStopped); 
}

Observer