JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
    <li>Toplevel A
        <ul>
            <li>Sublevel 1 B
                <ul>
                    <li>Sublevel 2 C</li>
                    <li>Sublevel 2 D</li>
                </ul>
            </li>
            <li>Sublevel 1 E
                <ul>
                    <li>Sublevel 2 F</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>TopLevel G
        <ul>
            <li>Sublevel 2 C</li>
            <li>Sublevel 2 D</li>
        </ul>
    </li>
</ul>

CSS

.menu ul{
    display:none;
}
.menu li.expand>ul{
    display:block;
}

JavaScript

var expandClassName = 'expand';
[].forEach.call(
  document.querySelectorAll('.menu li'), 
  function(el){
    el.addEventListener('click', function(e){
        e.stopPropagation();
        var self = this;
        if(self.classList.contains(expandClassName)){
            self.classList.remove(expandClassName);
        }else{
            self.classList.add(expandClassName);
        }
    });
  }
);