JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="theMenu"> 
    <li>
        <a title="open or close this section" href="#">Info</a>
        <ul> 
            <li><a href="#">Basic</a></li> 
            <li><a href="#">Advanced</a></li> 
        </ul> 
    </li> 
    <li>
        <a title="open or close this section" href="#">Documents</a> 
        <ul> 
            <li><a href="#">Newsletters</a></li> 
            <li><a href="#">Policies and Procedures</a></li> 
            <li><a href="#">job Descriptions</a></li> 
        </ul> 
    </li> 
</ul>

CSS

#theMenu, 
#theMenu ul     {list-style:none; width:15em;}
#theMenu ul     {display:none;}
#theMenu li a   {background:#F6F6F6; color:#010101; display:block; font-weight:bold; padding:0.5em 1em; text-decoration:none; border:1px solid #DFDFDF;}
#theMenu ul a   {background:#F6F6F6; color:#010101; font-weight:normal; text-decoration:none;}
#theMenu ul a:hover { ackground:#F0EBE1; text-decoration:underline; color:#711515;}

JavaScript

$("#theMenu > li > a").not(":first").find("+ ul").slideUp(1);
$("#theMenu > li > a").click(function() {
    $(this).next('ul').slideToggle();
});