jQuery addClass example

Change class name on click in jQuery

by Dmitri Ganenco

HTML

<div class="container">
  <div class="numChoice first-row">
  <div class="col-md-5ths">
    <div class="num">1</div>
  </div>
  <div class="col-md-5ths">
    <div class="num">2</div>
  </div>
  <div class="col-md-5ths">
    <div class="num">3</div>
  </div>
  <div class="col-md-5ths">
    <div class="num">4</div>
  </div>
  <div class="col-md-5ths">
    <div class="num">5</div>
  </div>
</div>
  <br><br>
<div class="numChoice second-row">
  <div class="col-md-5ths">
    <div class="num">1</div>
  </div>
  <div class="col-md-5ths">
    <div class="num">2</div>
  </div>
  <div class="col-md-5ths">
    <div class="num">3</div>
  </div>
  <div class="col-md-5ths">
    <div class="num">4</div>
  </div>
  <div class="col-md-5ths">
    <div class="num">5</div>
  </div>
</div>
</div>

CSS

.numChoice{
  display: block;
}
.num{
  width: 20px;
  height: 20px;
  background-color: #DDD;
  text-align: center;
  float: left;
  cursor: pointer;
}
.num.active{
    color: green;
}
.num.disabled{
    color: red;
}

JavaScript

$('.numChoice > .col-md-5ths').click(function() {
			var otherSide = $(this).parent().hasClass('first-row') ? '.second-row' : '.first-row';
  		var otherElement = $(otherSide).children().removeClass('disabled').eq($(this).index()).children();
      var $thisNum = $(this).children();
    
      if ($(this).hasClass('disabled')) {    
        $(this).removeClass('disabled');
      }
        $thisNum.toggleClass('active').siblings().removeClass('active');
        otherElement.toggleClass('disabled', $thisNum.hasClass('active'));
        otherElement.toggleClass('active', $thisNum.hasClass('disabled'));
});