JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>level 2
        <ul>
            <li>level 2.1
                <ul>
                    <li>a1</li>
                    <li>a2</li>
                </ul>
            </li>
            <li>b</li>
        </ul>
    </li>
    <li>level 3
        <ul>
            <li>level 4
                <ul>
                    <li>c</li>
                    <li>d</li>
                </ul>
            </li>
            <li>e</li>
            <li>f</li>
        </ul>
    </li>
</ul>

JavaScript

$(document).ready(function(){
  $('li').click(function(ev) {
    ev.stopPropagation();
      $(this).children('ul').show();
      $(this).prev().children('ul').hide();
      $(this).siblings().children('ul li ul').hide();
      $(this).next().children('ul').hide();
  }); 
  $('li > ul').hide();
});