JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<ul>
    <li>
        level 1
        
        <ul>
            <li>a</li>
            <li>b</li>
        </ul>
    </li>
    <hr>
    <li>
        level 2
        <ul>
            <li>
                level 3
                <ul>
                    <li>c</li>
                    <li>d</li>
                </ul>
            </li>
            
            <li>e</li>
            <li>f</li>
        </ul>
    </li>
</ul>

CSS

ul{
    margin:15px;
    border:1px solid red;
    list-style-type: none;
}
ul ul{
    display:none;
}
li{
    margin: 17px;
}
ul li:hover>ul{
    /* display:block; */
}

hr {
    display: block;
    width: 95%;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    padding: 0;
    margin: 2em;
    align: center;
}

JavaScript

$('li').click(function(ev) {
    $(this).find('>ul').slideToggle();
    ev.stopPropagation();
});