jQuery toggleClass example

Toggle class name on click in jQuery

HTML

<li class="li" target="#collapse1"><a>Collapse 1</a></li>
<div class="collapse" id="collapse1">
    <li>Item</li>
    <li>Item</li>
</div>
<li class="li" target="#collapse2"><a>Collapse 2</a></li>
<div class="collapse" id="collapse2">
    <li>Item</li>
    <li>Item</li>
</div>
<li class="li" target="#collapse3"><a>Collapse 3</a></li>
<div class="collapse" id="collapse3">
    <li>Item</li>
    <li>Item</li>
</div>

CSS

.collapse {
  height:0;
  visibility: hidden;
}

.collapse.show {
  height:100%;
  visibility: visible;
  display: block;
  -webkit-transition-property: height, visibility;
  transition-property: height, visibility;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
}

JavaScript

$('.li').click(function() {
  var target = $(this).first().attr("target");
  var collapse = $(target);

  if(!((collapse).hasClass('show'))) {
    $('.collapse').removeClass('show');
    $(collapse).addClass('show');
  };
});