JSFiddle - React, Tailwind, and code Playground

by bedenz

HTML

<div id="movement">
</div>
<div id="content">
Content goes here!
</div>

CSS

#movement  {
   width: 100%;
   height: 500px;
	  background-color:#ff0000;
   } 
   
#content {
	  width:100%;
	  min-height:500px;
	  background-color:#ffff00;
  }

JavaScript

var sliderHeight = "0";
  var initialDelay = 0;
  var slideDuration = 1800;
 
  $(document).ready(function(){
	$('#movement').show();
	$('#movement').each(function () {
		var current = $(this);
		current.attr("box_h", current.height());
	});
	$("#movement").css("height", sliderHeight);
 
	var delay = function() { sliderOpen(); };
	  setTimeout(delay, initialDelay);
	  });
 
  function sliderOpen()
  {
	var open_height = $("#movement").attr("box_h") + "px";
      $("#movement").animate({"height": open_height}, {duration: slideDuration, easing:"linear" });
  }