JSFiddle - React, Tailwind, and code Playground

HTML

<div class="con">
    <div id="tab">Click to Show</div>
    <div id="panel" style="display:none;">
        <p>Awesome hidden sliding pane</p>
        <div id="close">Close</div>
    </div>    
</div>

CSS

.con { position:relative; }

#tab {
    position:absolute;
    top:0px;
    right:20px;
    padding: 10px;
    background: #EEE;
    font-size: 16px;
    text-decoration: none;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    cursor:pointer;
}

#close { padding:10px 0 0 0; font-size:0.750em; }

#panel {
    padding:50px;
    width:100%;
    text-align:center;
    font-size:1em;
    font-family:Arial;
    font-weight:bold;
    background:#EEE;
    cursor:pointer;
    -webkit-border-bottom-left-radius:10px;
}

JavaScript

$("#tab").click(function() {
    $("#tab").toggle();
    $("#panel").slideToggle('slow');
});    

$("#close").click(function() {
    $("#tab").toggle();
    $("#panel").slideToggle('slow');        
});