JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">
    <li> Item 1 <span class="close">-</span> </li>
        <ul class="ala">
            <li> Item 1.1 </li>
            <li> Item 1.2 <span class="close">-</span> </li>
                <ul class="ala">
                    <li> Item 1.2.3 </li>
                </ul>
            <li> Item 1.3 </li>
        </ul>
    <li> Item 2 </li>
    <li> Item 3 </li>
    <li> Item 4 <span class="open">+</span> </li>
    <li> Item 5 </li>
        <ul class="ala" >
            <li> Item 5.1 </li>
            <li> Item 5.2 </li>
        </ul>
    <li> Item 6 </li>
</ul>  
<div class="log"></div>

CSS

#menu{
    border: 1px solid #000;
    width: 150px;
}


ul ul{
    padding-left:15px;
    
}
.hower{
    background-color: #eee;
}

.close{
    font-weight: bold; 
    color:#f00;
}
.open{
    font-weight: bold;    
    color:#0f0;
}

.here{
    color: #00f;
}

JavaScript

$(document).ready(function() {
      $("ul > ul").hide();
      $("ul > ul").prev("li").children().add("span").addClass("open").text("+");

      $("li").click(function(event){
          $(this).next("ul").toggle('slow', function(){
             $(".log").text('Transition Complete');
             $(this).prev("li").children("span").text("-").addClass("close");
          });
         
      });
        $("#menu li").hover(function() {
             $(this).addClass("hower");
             $(".log").text(this.data());
        },function(){
         $(this).removeClass("hower");
       });
   });