JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.smartmenus/1.0.0/css/sm-simple/sm-simple.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.smartmenus/1.0.0/css/sm-core-css.css">
<ul class="hidden">
      <li><a href="#">Item 1-1</a>
          <ul class="hidden">
            <li><a href="#">Item 1-1-1</a></li>
            <li><a href="#">Item 1-1-2</a></li>
            <li><a href="#">Item 1-1-3</a></li>
          </ul>
      </li>
      <li><a href="#">Item 1-2</a></li>
      <li><a href="#">Item 1-3</a></li>
    </ul>

CSS

.sm .hidden {
  display: none;
}

JavaScript

$('ul  li  a').click(function() {

  $(this).next('.hidden').slideToggle();
  $(this).sibling('li').hide();
  
  $(this).parent().siblings().find('ul').slideUp();
})