JSFiddle - React, Tailwind, and code Playground

by Aubrey Taylor

HTML

<a class="js-drawer-control drawer-btn">Open Drawer</a>
<div class="js-drawer-view outer-drawer closed">
  <div class="js-drawer-content inner-drawer">
      <p class="inner-drawer-content">HELLO WORLD!</p>
  </div>
</div>

CSS

.outer-drawer{
  height: 0px;
  overflow: hidden;
  background: red;
  border: 1px solid black;   
}

.inner-drawer{
  overflow: hidden;
  background: blue;
  padding: 25px 15px;
  color: white;
}

.inner-drawer-content{
  padding:5px;
  background: white;
  color:black;   
}

.drawer-btn{
  cursor: pointer;
  background: yellow;
  display:block;
  padding: 10px;    
}

JavaScript

var jq_drawerControl = $('.js-drawer-control');
var jq_drawerView = $('.js-drawer-view');
var jq_drawerContent = $('.js-drawer-content');

function openDrawer(jq_view, jq_content) {
    jq_view.animate({
        'height': jq_content.outerHeight()
    }, {
        'duration': 250
    });
    jq_view.removeClass('closed');
}

function closeDrawer(jq_view) {
    jq_view.animate({
        'height': 0
    }, {
        'duration': 250
    });
    jq_view.addClass('closed');
}
function onDrawerClick(e) {
    e.preventDefault();

    var closed = jq_drawerView.hasClass('closed');

    if (closed) {
        openDrawer(jq_drawerView, jq_drawerContent);
        $(this).text('Close Drawer');
    } else {
        closeDrawer(jq_drawerView);
        $(this).text('Open Drawer');
    }
}

jq_drawerControl.bind('click', onDrawerClick);