Q:

Swaping background in div - jQuery

I have the following structure of html
<div id="cool" class="cool"></div>
<div id="cool2" class="cool2"></div>
<button id="button">Click Me</button>

On the click of button, how would i swap the color. The div's are not childrens of any.
$(document).ready(function(){ 
  $("#button").on('click', function(){
       $("#cool").addClass("cool2").removeClass("cool"); 
       $("#cool2").addClass("cool").removeClass("cool2");           
  });  
});

I know there is something toggleClass(), but how would you swap the backgrounds of two div containers who are not childrens or should i attach the even to document and propagate to button to get the childrens?.

A:

Like you posted, you may use toggleClass()

This method takes one or more class names as its parameter. In the
  first version, if an element in the matched set of elements already
  has the class, then it is removed; if an element does not have the
  class, then it is added.

$(document).ready(function(){ 
  $("#button").on('click', function(){
       $("#cool, #cool2").toggleClass("cool cool2");          
  });  
});
div
{
    height: 50px;
}

.cool
{
    background-color: gray; 
}
.cool2
{
    background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="cool" class="cool"></div>
<div id="cool2" class="cool2"></div>
<button id="button">Click Me</button>

