JSFiddle - React, Tailwind, and code Playground

by mauricederegt

HTML

<div id="main">test</div><div id="div">lol<br />lol<br />lol<br />lol<br />lol<br />lol<br />lol<br />lol</div>
<div id="trigger">trigger</div>

CSS

div.container { overflow:hidden; width:70px; height:90px; border: 2px solid #CCC; z-index: 9;}
div.container-open { overflow:hidden; width:470px; height:180px; border: 2px solid #CCC; z-index: 9;}

#main {float: left; width:400px; height:90px;}

JavaScript

// by default we block the size with JS 
$("#div").addClass("container");
// click event 
$("#trigger").click( function() { 
      $("#div").toggleClass("container-open");
});