JSFiddle - React, Tailwind, and code Playground

by mefron

HTML

<div id="nav">
    <div id="menu">
        <div class="menuTitle">Title</div>
        <div class="menuItem">Item1</div>
        <div class="menuItem">Item2</div>
        <div class="menuItem">Item3</div>
    </div>
    <div id="tab">Click Here</div>
</div>
<div id="content">** Other Content **</div>

CSS

#nav {
    font: 16px arial;
    display:inline-block;
}
#menu {
    width:150px;
    display:inline-block;
    border:1px solid gray;
}
.menuTitle {
    font-weight:bold;
}
.menuItem {
    border-top:1px solid gray;
}
#tab {
    display:inline-block;
    width:30px;
    height:30px;
    background-color:#d3c1a9;
    vertical-align:top;
    cursor:pointer;
    font-size:10px;
}
#content {
    display:inline-block;
    vertical-align:top;
    margin-left:5px;
}

JavaScript

var mode = 0
$('#tab').on('click', function (event) {
    event.stopPropagation();
    if (mode == 0) {
        $('#menu').hide('slide', 1000, {}, function () {});
        mode = 1;
    } else {
        $('#menu').show('slide', 1000, {}, function () {});
        mode = 0;
    }
});