jQuery addClass example

Change class name on click in jQuery

by shatul patil

HTML

<div id="foo" class="something"></div>

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

<div id="foo" class="textB">yyyyyy</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() {
    $('.textA').removeClass('showMe');
    $('.textB').addClass('showMe');
  }, function() {
    $('.textA').addClass('showMe');
    $('.textB').removeClass('showMe');
  })
})