Slide Toggle Example2

Change class name on click in jQuery

by Tamil

HTML

<ul id="parent">
  <li>Child One
    <div class="content">
      <ul>
        <li><a href="https://vuejs.org/" target="_blank">Vue JS</a></li>
        <li><a href="#">Dummy</a></li>
        <li><a href="#">Dummy</a></li>
        <li><a href="#">Dummy</a></li>
      </ul>
    </div>
  </li>
  <li>Child Two
  <div class="content">
      <ul>
        <li><a href="https://vuejs.org/" target="_blank">Vue JS</a></li>
        <li><a href="#">Dummy</a></li>
        <li><a href="#">Dummy</a></li>
        <li><a href="#">Dummy</a></li>
      </ul>
    </div>
  </li>
  <li>Three</li>
  <li>Four</li>
</ul>

CSS

.content{
  display: none;
}

JavaScript

$(document).ready(function(){

  $("#parent > li, #parent1 > li, #parent2 > li").click(function(event){
    event.stopPropagation()
      $(this).siblings().children().slideUp('slow')
      $(this).children().slideToggle('slow')
  })
$(".content").click(function(event){
    event.stopPropagation();
  })
});