2

How can I toggle between two classes in jQuery, while the element does not have either class.

Please note: I want to know if there is a way to do this with the toggleClass() method and not by addClass(), removeClass(). For example:

$('#myDiv').click(function(){
    $("#myDiv").toggleClass('red blue') 
})
freedomn-m
  • 27,664
  • 8
  • 35
  • 57
  • 1
    how can you toggle if it does not exist? – guradio Sep 27 '16 at 10:18
  • 1
    the above code will add and remove both classes, it will not toggle between them – madalinivascu Sep 27 '16 at 10:19
  • `toggleClass("red blue")` will switch both on/off at the same time if neither are on at the start. If you mean, turn one on then next time turn it off and put the other one on, then no - that makes no sense - you need to have one on to start with. – freedomn-m Sep 27 '16 at 10:20
  • 1
    Yes but I want it to add the first class, and then toggle back and forth between them. Is this possible without addClass()? –  Sep 27 '16 at 10:20
  • @madalinivascu not understanding guradio 's comment, I revisited what was being requested and agree with you - removed my comment and added another – freedomn-m Sep 27 '16 at 10:21
  • 1
    Seems legetimate question imho, not really deserving downvotes... – A. Wolff Sep 27 '16 at 10:22
  • "*Yes but I want it to add the first class, and then toggle back and forth between them. Is this possible without addClass()?*" you should add (have added) this to the question. – freedomn-m Sep 27 '16 at 10:35

2 Answers2

10

You could use function parameter of toggleClass() method:

$('#myDiv').click(function() {
  $(this).toggleClass(function(){
    return $(this).is('.red, .blue') ? 'red blue' : 'red';
  })
});


$('#myDiv').click(function() {
  $(this).toggleClass(function() {
    return $(this).is('.red, .blue') ? 'red blue' : 'red';
  })
});
.red {
  color: red;
}
.blue {
  color: blue;
}
#myDiv {
  -webkit-user-select: none;
  /* Chrome all / Safari all */
  -moz-user-select: none;
  /* Firefox all */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
  /* Likely future */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="myDiv">
  My DIV
</div>
A. Wolff
  • 74,033
  • 9
  • 94
  • 155
3

Just use toggleClass with more than one class. jQuery will toggle them each by each.

$("div").addClass("red");

setInterval(function() {
    $("div").toggleClass("red blue");
}, 1000);
div {
  width: 100px;
  height: 100px;
}
.red {
  background: red;
}
.blue {
  background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div></div>
eisbehr
  • 12,243
  • 7
  • 38
  • 63
  • 1
    but he said that the div doesnt have any class onload. – callback Sep 27 '16 at 10:18
  • And? Whats the problem? Thats the sense of `toggle`, if the class is not available it will be added. My code is just an example. @callback – eisbehr Sep 27 '16 at 10:19
  • 1
    Yea, but I'm realizing it is impossible. I wanted it to toggle between the two classes, without having an initial class. I guess it's not possible with toggle class alone. –  Sep 27 '16 at 10:21
  • @eisbehr: Ah, sorry. I didn't see any text saying you (like me) had happily violated the requirement, and missed that line of code. (I also took it that this was meant to wait for the first click before adding either class.) – T.J. Crowder Sep 27 '16 at 10:31