JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<ul class="menu">
    <li>
        <a href="#">lipsum</a>
        
        <ul>
            <li>lipsum</li>
            <li>lipsum</li>
            <li>lipsum</li>
            <li>lipsum</li>
        </ul>
    </li>
    <li><a href="#">lipsum</a></li>
    <li><a href="#">lipsum</a></li>
    <li><a href="#">lipsum</a></li>
</ul>

CSS

ul {
    margin: 0;
    padding: 0;
    
    list-style: none;
}

.menu ul {
    display: none;
    margin-left: 20px;
}

JavaScript

$(".menu").on("click", "a", function(e){
    var $el = $(this);
    
    if( $el.next().length ) {
        e.preventDefault();
        $el.next().slideToggle();
    }
});