JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="#" class="level1">Menu Item</a></li>
    <li class="expandable">
        <a href="#" class="level1">Menu Item +</a>
        <ul class="sub-menu">
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
    <li><a href="#" class="level1">Menu Item</a></li>
    <li class="expandable">
        <a href="#" class="level1">Menu Item +</a>
        <ul class="sub-menu">
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
    <li><a href="#" class="level1">Menu Item</a></li>
    <li><a href="#" class="level1">Menu Item</a></li>    
</ul>

JavaScript

$(document).ready(function(){
    
    $(".sub-menu").hide();
    
    $(".expandable .level1").bind('click', function () {
        $(this).next().slideToggle(200, function () {
            $(this).parent().toggleClass("opened");
        });
    });
    
});