JSFiddle - React, Tailwind, and code Playground

by Flandre

HTML

<div id="menuwrap">
    <a href="#" id="menutoggle">Toggle Menu First</a>
    <ul id="menucontainer">
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
    </ul>
</div>


<br>
<br>
<a id="argh">Then Click me</a>

CSS

#menucontainer {
    display:none;
}

JavaScript

$('html').click(function() {
   $('#menucontainer').hide(); 
});

$('#menuwrap').click(function(event){
     event.stopPropagation();
});

$('#menutoggle').click(function(event){
     $('#menucontainer').toggle();
});

$('#argh').click(function(event){
    event.stopPropagation();
    $(this).after("<br>Menu was not collapsed.");
});