JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript">
    
</script>
<a href="#" onclick="toggle_visibility('menu1');">
    <p>Menu Um</p>
</a>

<div id="menu1" style="display:none;">
    <ul>
        <li>Item Um</li>
        <li>Item Dois</li>
        <li>Item Três</li>
    </ul>
</div>
<a href="#" onclick="toggle_visibility('menu2');">
    <p>Menu Dois</p>
</a>

<div id="menu2" style="display:none;">
    <ul>
        <li>Item Um</li>
        <li>Item Dois</li>
        <li>Item Três</li>
    </ul>
</div>

JavaScript

function toggle_visibility(id) {
    var e = document.getElementById(id);
    var visivel = e.style.display == 'block';
    var menus = document.querySelectorAll('[id^=menu]');
    for (var i = 0; i < menus.length; i++) {
        menus[i].style.display = 'none';
    };
    if (visivel) e.style.display = 'none';
    else e.style.display = 'block';
}