JSFiddle - React, Tailwind, and code Playground

by Chintan Upadhayay

HTML

<ul class="parentMenu">
  <li><a href="#">Chapter 1</a>
    <ul class="childMenu">
      <li><a href="#">Page 1</a>
        <ul class="garndChild">
          <li><a href="#" target="_blank">Page 1.1</a></li>
          <li><a href="https://nmredmond.sharepoint.com/spapps" target="_blank">Page 1.2</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a>
        <ul class="garndChild">
          <li><a href="#" target="_blank">Page 2.1</a></li>
        </ul>
      </li>

    </ul>
  </li>

  <li><a href="#">Chapter 2</a>
    <ul class="childMenu">
      <li><a href="#">Page 3</a></li>
    </ul>
  </li>
  <li><a href="https://nmredmond.sharepoint.com/spapps" target="_blank">Chapter 3</a></li>
</ul>

CSS

.childMenu, .garndChild {
    display: none;
}
.parentMenu li {
  padding-bottom:10px;
}

JavaScript

$('.parentMenu  li').on('click', function(e){		
				 e.preventDefault();
				 if($(this).hasClass('Expand')){

				  	//Slide Up Who have Expand Class 
					$('.Expand').removeClass('Expand').addClass('Collapsed').next().slideUp()
					
				  } else {
				 	$(this).addClass('Expand').next().addClass('Expdand').slideDown();
			 }
         });