JSFiddle - React, Tailwind, and code Playground

by Ender

HTML

<ul>
    <li class="top"><a href="" class="menu-item">Dashboard</a></li>
    <li class="top"><a href="" class="menu-item">Products</a>
        <ul class="admin-submenu">
            <li class="sub"><a href="">My Products</a></li>
            <li class="sub"><a href="">Add New</a></li>
        </ul>
    </li>
    <li class="top"><a href="" class="menu-item">Lists</a>
        <ul class="admin-submenu">    
            <li class="sub"><a href="">Brands</a></li>
            <li class="sub"><a href="">Colors</a></li>                          
            <li class="sub"><a href="">Locations</a></li>
            <li class="sub"><a href="">Manufacturers</a></li>
        </ul>
    </li>
</ul>

CSS

.admin-submenu { display: none; }

JavaScript

$(document).ready(function() {
    $('.menu-item').click(function(e) {
        e.preventDefault();
        $(this).next('.admin-submenu').slideToggle();
    });
});