JQuery toggle and remove css classes

Question

I have the following CSS:

.red {background-color: #CC0000;}
.green {background-color: #009900;}

and my HTML is:

div class="red" id="ch1">Content</div>
<div class="red" id="ch2">Content</div>
<div class="red" id="ch3">Content</div>
...
<div class="green" id="ch..">Content</div>
<div class="red" id="ch..">Content</div>

and I am using the following script to change class on divs:

$(document).ready(function() { 
$(".red , .green").click(function(){
    $(".green").removeClass("green").addClass("red");
     $(this).toggleClass('red green');
});   
});

Works fine to change div class onclick from .red to .green but when I click on the "green" the div doesn't becomes "red". I other words I would like to have or all "red" or just ONE "green" div ALSO nothing is working if I change the sequence of .red - .green in my CSS

Any thoughts? Thanks in advance

epascarello · Accepted Answer · 2015-08-18 01:50:58Z

1

Do not include the element that is clicked...

$(".green").not(this).removeClass("green").addClass("red");

answered Aug 18, 2015 at 1:50

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nitesh Phadatare · Accepted Answer · 2015-08-18 04:57:43Z

1

Only using toggleClass() should work. So remove following line from your code $(".green").removeClass("green").addClass("red");

Solution:-

$(document).ready(function() { 
    $(".red , .green").click(function(){
        $(this).toggleClass('red green');
    });   
});

Is this what you are expecting? http://jsfiddle.net/k23g3ne4/

edited Aug 18, 2015 at 4:57

answered Aug 18, 2015 at 4:51

Nitesh Phadatare

3251 gold badge2 silver badges12 bronze badges

Comments

duellsy · Accepted Answer · 2015-08-18 04:54:07Z

0

this is working :

$(this).siblings('.red , .green')
  .removeClass("green")
  .addClass("red");

edited Aug 18, 2015 at 4:54

duellsy

8,6432 gold badges38 silver badges61 bronze badges

answered Aug 18, 2015 at 2:07

maaeab

3261 silver badge7 bronze badges

Collectives™ on Stack Overflow

JQuery toggle and remove css classes

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related