JSFiddle - React, Tailwind, and code Playground

by letanure

HTML

<ul class="side-bar-nav">
    <li>
        <a href="#ggh">sem submenu</a>
    </li>
    <li>
        <a href="#1">1</a>
        <ul>
            <li><a href="#11">11</a></li>
            <li><a href="#11">11</a></li>
        </ul>
    </li>
    <li>
        <a href="#2">2</a>
        <ul>
            <li><a href="#22">22</a></li>
            <li><a href="#22">22</a></li>
        </ul>
    </li>
    <li>
        <a href="#3">3</a>
        <ul>
            <li><a href="#33">33</a></li>
            <li><a href="#33">33</a></li>
        </ul>
    </li>
</ul>

CSS

.side-bar-nav{
    list-style: none;
    margin: 0;
    padding: 0;
}
.side-bar-nav li{
    border: 1px solid gray;
    padding: 3px
}
.side-bar-nav li a{
    display: block;
}
.side-bar-nav ul{
    display: none;
}
.side-bar-nav ul li{}
.side-bar-nav ul li a{}

JavaScript

$(".side-bar-nav li a").on("click", function(evt){
    if( $(this).siblings('ul')[0] ){
        evt.preventDefault();
        $(this).siblings('ul').slideToggle();
    }
})