JSFiddle - React, Tailwind, and code Playground

by Hamed Momeni

HTML

<div class="wrapper">
    <div class="drawer">
        buttons here!
    </div>
    <div class="handle">
        click here!
    </div>
    <div class="menu">
        top menu!
    </div>
</div>

CSS

.wrapper{
    width:180px;
    margin:0 auto;
    height:260px;
    border:1px solid black;
}
.drawer{
    display:none;
    background:#ccc;
    height:120px;
    text-align:center;
    padding-top:30px;
}
.menu{
    background:#d9d9d9;
    height: 32px;
    position: absolute;
    top: 0;
    width: 180px;
    z-index: -1;
    font-size:10px;
}
.handle{
    width:40px;
    height:32px;
    margin:0 auto;
    font:8px times;
    background:red;
}

JavaScript

$(function(){
    var i = 0;
    $('.handle').click(function(){
        if(i == 0){
            $('.drawer').slideDown();
            i = 1;
        }else{
            $('.drawer').slideUp();
            i = 0;
        }
    });
});