JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slide1"></div>
<div id="arrow">click</div>

CSS

#slide1{
 background:red; margin:3px; width:80px;
height:40px; float:left;
}

 div { background:#3d9a44; margin:3px; width:80px;
height:40px; float:left; }

JavaScript

$('#arrow').click(function () {
      if ($('#slide1').hasClass("hdn")) {
         $('#slide1').animate({"height": "40px"}, "medium").removeClass("hdn"); 
      } else {
          
            $('#slide1').animate({"height": "20px"}, "medium").addClass("hdn");
      }
  });