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

score 65 · Accepted Answer · answered Aug 27 '13 at 14:25

65

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

answered Aug 27 '13 at 14:25

Pointy

405,095
59
585
614

3

...and if you ever need to check if a class is set: `hasClass()` : http://api.jquery.com/hasClass/ – gvee Aug 27 '13 at 14:26
Excellent! What a quick fix! Cheers Pointy! – Daft Aug 27 '13 at 14:29
@Virus721 there's no need to check if all you want to do is add the class; `.addClass()` won't add it twice. – Pointy Aug 27 '13 at 14:33
Okay, so this question has no reason to be then. – Virus721 Aug 27 '13 at 14:37
1

@Virus721 I'm pretty sure that the OP wants to remove the class if it's present, and add the class if it's missing. – Pointy Aug 27 '13 at 14:39
I appreciate the suggestion Virus, but Pointy's worked perfectly for me. – Daft Aug 27 '13 at 14:39
Thanks, this helped with this: $(this).toggleClass('selectedTrack_row').siblings().removeClass('xyzClass'); – ImaginedDesign Jul 27 '14 at 04:20

score 14 · Answer 2 · answered Aug 27 '13 at 14:25

14

Try this

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

answered Aug 27 '13 at 14:25

Satpal

132,252
13
159
168

score 3 · Answer 3 · answered Aug 27 '13 at 14:25

3

Just use .toggleClass() to acheive that.

answered Aug 27 '13 at 14:25

majorhavoc

2,385
1
24
26

score 2 · Answer 4 · answered Aug 27 '13 at 14:27

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

score 1 · Answer 5 · answered Aug 27 '13 at 14:27

1

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

answered Aug 27 '13 at 14:27

Khalid Dabjan

2,697
2
24
35

score 0 · Answer 6 · answered Sep 02 '20 at 11:07

0

you can you simple swith the class on click


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

answered Sep 02 '20 at 11:07

Mr Coder

507
3
13

removeClass() if it exists

6 Answers6

Linked