Toggle between classes on click

Question

How do I add and remove a class every time I click?

Original Code

HTML:

<div class="box"></div>

CSS:

.box{
  width: 100px;
  height: 100px; 
  background: blue;
}

I want to add:

.rounded {
  border-radius: 10px;
}

I know I have to use the click function on the box div, but I don't know how to add a class and remove it.

Answer:

Use the toggleClass

$(".box").click(function(){
   $(this).toggleClass("rounded");
});

decho · Answer 1 · 2014-06-07T14:00:10.293

2

The other solutions are just switching between class(es). If you want to modify the existing one and add/remove values from it use this:

$('.box').css('border-radius','50px');

and to remove:

$('.box').css('border-radius', '');

edited Jun 07 '14 at 14:00

answered Jun 07 '14 at 13:55

decho

1

This is what I was looking for! Thank you! I can't give rep point just yet. It won't let me, but thanks again. – Jtwa Jun 07 '14 at 14:03
but you can still accept the answer by clicking 'tick' sign. – 0xburned Jun 07 '14 at 14:07

Daniel Cheung · Answer 2 · 2014-06-07T13:55:22.767

1

Jquery can remove a class, however cannot alter any CSS in class:

$(target).addClass("myClass");
$(target).removeClass("myClass andThisOne removeSoManyClasses");

To overwrite a class the other way:

$("body").append("<style class='remove'>.box{/*many css*/}</style>");
$(".remove").remove();

edited Jun 07 '14 at 13:55

answered Jun 07 '14 at 13:50

Daniel Cheung

Krishanu Dey · Answer 3 · 2014-06-07T13:58:56.047

0

Yes its possible.
To add css class the syntax is,

$(selector).addClass(classname)

To removecss class the syntax is,

$(selector).removeClass(classname)

edited Jun 07 '14 at 13:58

answered Jun 07 '14 at 13:49

Krishanu Dey

score 0 · Accepted Answer · answered Jun 07 '14 at 14:26

You shouldn't have to do this. How about this approach instead...

.box{
  width: 100px;
  height: 100px; 
  background: blue;
}

.box.rounded {
  border-radius: 10px;
}

Then just toggle the "rounded" class with toggleClass.

$('.box').toggleClass('rounded');