JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="mainmenu">
                <a>hide</a><br />
                <a>index</a><br />
                <a id="clientside_handler">client-side</a><br />
                <div id="clientside_submenu">
                    <a>glass cannon</a><br />
                    <a>gong.nl project</a><br />
                    <a>glass cannon</a><br />
                    <a>gong.nl project</a><br />
                </div>
                <a id="serverside_handler">server-side</a><br />
                <div id="serverside_submenu">
                    <a>glass cannon</a><br />
                    <a>gong.nl project</a><br />
                    <a>glass cannon</a><br />
                    <a>gong.nl project</a><br />
                </div>
                <a>misc</a>
            </nav>

CSS

nav#mainmenu a {
    color: #111;
    display: inline-block;
    padding: 2px;
    cursor: pointer;
}

nav#mainmenu div {
  background-color: red;
}

nav#mainmenu div a {
    font-family: "Lato";
    font-size: 1em;
}

JavaScript

$(document).ready(function () {
   $("nav div").css({height: 0, opacity: 0});
});
$(document).ready(function () {
    $("a#clientside_handler").click(function (){
        alert("clientside clicked!")
        $("div#serverside_submenu").animate({
            opacity: 0,
            height: 0
        });
        $("div#clientside_submenu").animate({
            opacity: 1,
            height: $("div#clientside_submenu").get(0).scrollHeight
        });
    });
    $("a#serverside_handler").click(function (){
        alert("serverside clicked!")
        $("div#clientside_submenu").animate({
            opacity: 0,
            height: 0
        });
        $("div#serverside_submenu").animate({
            opacity: 1,
            height: $("div#serverside_submenu").get(0).scrollHeight
        });
    });
});