jQuery addClass example

Change class name on click in jQuery

by shatul patil

HTML

<div id="1" class="something">

<div class="textA showMe">xxxxx</div>

<div class="textB">yyyyyy</div>

</div>

<div id="2" class="something">

<div class="textA showMe">abcd</div>

<div class="textB">efghi</div>

</div>

CSS

.something {
  margin: 10px auto;
  background: tomato;
  width: 100px;
  height: 100px;
}

.textA {
  margin: 10px auto;
  background: green;
  width: 100px;
  height: 20px;
  display: none;
  color: white;
  text-align: center;
}

.textB {
  margin: 10px auto;
  background: red;
  width: 100px;
  height: 20px;
  display: none;
  color: white;
  text-align: center;
}

.showMe{
  display : block;
}

JavaScript

$(function(){
  $('.something').hover(function() {
   $(this).children('.textA').removeClass('showMe');
   $(this).children('.textB').addClass('showMe');
  }, function() {
    $(this).children('.textA').addClass('showMe');
    $(this).children('.textB').removeClass('showMe');
  })
})