jQuery toggleClass example

Toggle class name on click in jQuery

by michananya

HTML

<button class="Reset">reset</button>
<button class="mark-all">mark-all</button>
<br><br>
<div>
  <div class="round"></div>
  <div class="round"></div>
  <div class="round"></div>
</div>

CSS

.round {
  height: 23px;
  width: 23px;
  padding: 14px;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 25px;
  background-color: #777777;
  display: inline-block;
  transition: all 0.5s;
}

.red {  
  background-color: red;
  width: 120px;
}

JavaScript

$(document).ready(function(){
    $(".round").click(function() {
      $(this).toggleClass("red");    
    });

    $(".Reset").click(function() {
      $(".round").removeClass("red");    
    });
    $(".mark-all").click(function() {
      $(".round").addClass("red");    
    });


  });