JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" id="tituloMenu1">
    <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="#" id="tituloMenu2">
    <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

var links = document.querySelectorAll('[id^=tituloMenu]');
for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click', toggle_visibility);
}

function toggle_visibility(e) {
    e.preventDefault(); //por precaução
    var idDestino = this.id.split('tituloMenu')[1];
    var el = document.getElementById('menu' + idDestino);
    var visivel = el.style.display == 'block';
    var menus = document.querySelectorAll('[id^=menu]');
    for (var i = 0; i < menus.length; i++) {
        menus[i].style.display = 'none';
    }
    if (visivel) el.style.display = 'none';
    else el.style.display = 'block';
}