JSFiddle - React, Tailwind, and code Playground

by masteram

HTML

<ul id="nav">
<li class="arrow"><a href="#">Level 1 Link</a>
    <ul>
        <li><a href="#">Level 2 Link</a></li>
        <li><a href="#">Level 2 Link</a></li>
        <li class="arrow"><a href="#">Level 2 Link (selected)</a>
            <ul>
                <li><a href="#">Level 3 Link</a></li>
                <li><a href="#">Level 3 Link</a></li>
                <li class="arrow"><a href="#">Level 3 Link (selected)</a>
                    <ul>
                        <li><a href="#">Level 4 Link</a></li>
                        <li><a href="#">Level 4 Link</a></li>
                        <li><a href="#">Level 4 Link</a></li>
                        <li><a href="#">Level 4 Link</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</li>
<li><a href="#">Level 1 Link</a></li>
<li><a href="#">Level 1 Link</a></li>
<li class="arrow"><a href="#">Level 1 Link (selected)</a>
    <ul>
        <li><a href="#">Level 2 Link</a></li>
        <li><a href="#">Level 2 Link</a></li>
        <li class="arrow"><a href="#">Level 2 Link (selected)</a>
            <ul>
                <li><a href="#">Level 3 Link</a></li>
                <li><a href="#">Level 3 Link</a></li>
                <li class="arrow"><a href="#">Level 3 Link (selected)</a>
                    <ul>
                        <li><a href="#">Level 4 Link</a></li>
                        <li><a href="#">Level 4 Link</a></li>
                        <li><a href="#">Level 4 Link</a></li>
                        <li><a href="#">Level 4 Link</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</li>
<li><a href="#">Level 1 Link</a></li>
<li><a href="#">Level 1 Link</a></li>
<li><a href="#">Level 1 Link</a></li>

JavaScript

$('#nav > li.arrow').click(function(e){
 if ($(this).attr('class') != 'active'){
   $('#nav li ul').slideUp();
   $(this).next().slideToggle();
   $('#nav li.arrow').removeClass('active');
   $(this).addClass('active');
 }
 e.preventDefault();
 });
 $('#nav > li > ul > li.arrow').click(function(e){
  if ($(this).attr('class') != 'active'){
   $('#nav li ul li ul').slideUp();
   $(this).next().slideToggle();
   $('#nav li ul li.arrow').removeClass('active');
   $(this).addClass('active');
 }
 e.preventDefault();
 });
 $('#nav > li > ul > li > ul > li.arrow').click(function(e){
  if ($(this).attr('class') != 'active'){
   $('#nav li ul li ul li ul').slideUp();
   $(this).next().slideToggle();
   $('#nav li ul li ul li.arrow').removeClass('active');
   $(this).addClass('active');
 }
 e.preventDefault();
 });