JSFiddle - React, Tailwind, and code Playground
HTML
<a href="#" class="nav-js-trigger">menu</a>
<div class="hidden">Hello</div>
<br />
<a href="#" class="nav-js-trigger">menu</a>
<div class="hidden">Hello</div>
CSS
.hidden {
display:none;
}
.show-nav {
background:yellow;
display:block !important;
}
JavaScript
$(document.documentElement).on('click touchend', function(e) {
var nav = $(e.target).closest('.nav-js-trigger');
var hidden = $(e.target).closest('.show-nav')
if ( nav.length > 0 ) {
$('.show-nav').not( nav.next().toggleClass('show-nav') ).removeClass('show-nav');
} else if ( hidden.length === 0 ) {
$('.show-nav').removeClass('show-nav');
}
});