JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="mainmenu">
                <a>hide</a><br />
                <a>index</a><br />
                
                <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 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>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

$("nav div").hide();

    $("#serverside_handler").click(function (){
        alert("serverside clicked!");
        $("#clientside_submenu").hide({
            opacity: 0,
            height: 0
        });
        $("#serverside_submenu").show({
            opacity: 1,
            height: $("#serverside_submenu").get(0).scrollHeight
        });
    });
    $("#clientside_handler").click(function (){
        alert("clientside clicked!");
        $("#serverside_submenu").hide({
            opacity: 0,
            height: 0
        });
        $("#clientside_submenu").show({
            opacity: 1,
            height: $("#clientside_submenu").get(0).scrollHeight
        });
    });