JSFiddle - React, Tailwind, and code Playground

HTML

<div>
      <ul class="menu">
        <li><a data-expand="lev0">lev0</a>
          <ul id="lev0">
            <li>lev1
              <ul>
                <li>lev2</li>
                <li>lev2</li>
                <li>lev2</li>
                <li>lev2</li>
              </ul>
            </li>
            <li>lev1</li>
            <li>lev1
              <ul>
                <li>lev2</li>
                <li>lev2</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div>
      <ul class="menu">
        <li><a data-expand='lev02'>lev02</a>
          <ul id="lev02">
            <li>lev1
              <ul>
                <li>lev2</li>
                <li>lev2</li>
                <li>lev2</li>
                <li>lev2</li>
              </ul>
            </li>
            <li>lev1</li>
            <li>lev1
              <ul>
                <li>lev2 </li>
                <li>lev2</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>

CSS

li{
   list-style: none;
}
.menu{
   float:left;
}
.clear   list-style: none;
}
.menu{
   float:left;
}
.clear{
        clear:left;
      }

JavaScript

function expand(id,nameitem,expanded){
  var Item = document.getElementById(id); 
  if(expanded=== undefined){
    expanded = (Item.style.display === "none") ; //toggle expanded state
  }
 
  Item.style.display =  expanded ? "block" : "none"; 
  window.location.hash = expanded ? "#"+nameitem : "#";
} 

function init() {
  expand("lev0","lev0", window.location.hash=="#lev0");
  expand("lev02","lev02", window.location.hash=="#lev02");  
  var links = document.querySelectorAll("ul.menu li a");
  for(var e=0; e<links.length; e++){
      links[e].addEventListener("click", function(){
          var itemName = this.getAttribute("data-expand");
            console.log(itemName);
          if(itemName != null){
              expand(itemName, itemName);
          }
      });
  }
}

init();