JSFiddle - React, Tailwind, and code Playground

by dru_zod

HTML

<div class="main">
  <div class="menu">

    <div class="arrow">
    </div>

    <div class="content">
      Some text <input /> goes here, and some text goes here <input /> and here <select></select>
    </div>

  </div>
</div>

CSS

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.main {
  width: 100%;
  height: 100%;
  background-color: #87cefa;
}

.menu {
  position: absolute;
  margin-left: -200px;
  width: 400px;
  left: 50%;
  top: 0;
  background-color: green;
  padding: 10px;
  border-radius: 0px 0px 5px 5px;
}

.content {
  text-align: justify;
}

.arrow {
  position: absolute;
  background-color: green;
  border-bottom-right-radius: 5px;  
  right: 0;
  bottom: 0;
  height: 20px;
  width: 20px;
}

.menu .arrow::after {
  content: '\25b2';
}

.menu.up .arrow::after {
  content: '\25bc';
}

JavaScript

$(function () {

  var $menu = $('.menu');
  var $content = $('.content');

  $('.arrow').on('click', function () {    
    if ($menu.hasClass('up')) {
    	$content.show();
      var desiredHeight = $menu.css('height', 'auto').height();
      $content.hide();
      $menu.height(0);
    	$menu.removeClass('up').animate({ height: desiredHeight + 'px' }, function () {
      	$menu.css('height', 'auto');
      });
      $content.fadeIn();
    }
    else {
    	$menu.addClass('up').animate({ height: 0 });
      $content.fadeOut();    
    }
  });

});