jQuery addClass example

Change class name on click in jQuery

HTML

<div class="test">
  <b>Foo</b>
  <div class="info">Info 1</div>
  <b>Bar</b>
</div>

<div class="test">
  <b>Foo</b>
  <div class="info">Info 2</div>
  <b>Bar</b>
</div>

<div class="test">
  <b>Foo</b>
  <div class="info">Info 3</div>
  <b>Bar</b>
</div>

CSS

.test {border: 1px solid #fff0f0;display: block;border-radius: 4px;margin-bottom: 2px;padding: 5px;cursor:pointer; transition: 1s all;}
.test > .info {height:0px;overflow: hidden; transition: 1s all}
.test:hover,
.test.active {background: #fff0f0;display: block;border-left:6px solid #f00;}
.test.active > .info {height:auto;}

JavaScript

$("div.test").click(function () {
  $("div.test").removeClass("active");
  $(this).addClass("active");
});