JSFiddle - React, Tailwind, and code Playground

by rur_d

HTML

<div id="container">
    <div id="top"><div id="header"><button onclick="toggleIt()">Toggle</button></div></div>
    <div id="exp-holder"><div id="expand"><div class="nav">
        <button>nav</button>
        <button>nav</button>
        <button>nav</button>
        <button>nav</button>
    </div></div></div>
    <div id="body">ds</div>
    <div id="footer">sd</div>
</div>

CSS

#container {
    height  : auto;
    position : relative;
    border   :  solid 1px #ff4444;
    z-index  : 500;
    margin-top : 10px;
}
#top {
background-color: #487693;
    height  : 80px;
}

#header {
    position : relative;
    top : 30px;
}

#exp-holder {
    width   : 100%;
    position : absolute;
    top      : 80px;
    background-color: #487693;
}

#expand {
    overflow  : hidden;
}

#expand .nav{
    position : relative;
    min-height: 45px;
    padding-bottom : 20px;
    text-align : left;
}

.nav button {
    vertical-align : middle;
    width : 200px;
}

#body {
background-color: #00faa1;
    height  : 500px;
}
#footer {
background-color: #345676;
    height  : 50px;
}

JavaScript

$(document).ready( function(){ 
    $("#expand").hide();
});

var navShown = false;

function toggleIt(){
    if(!navShown){
        $('#exp-holder').animate({top:'55px'}, 400);
        $("#expand").slideDown(400);
        $("#expand > .nav").css("top", "50px").animate({top:'-=50'},500);
        $("#header").delay(100).animate({top:'20px'},400);
    } else {
        $('#exp-holder').animate({top:'80px'}, 400);
        $("#expand").slideUp(400);   
        $("#expand > .nav").animate({top:'50px'},400);
        $("#header").animate({top:'30px'},300);
    }
    navShown = !navShown;
}