JSFiddle - React, Tailwind, and code Playground

by Bilal AFSAR

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn"> Hide </button>
<br/><br/>
<div id="div1">
  <div>Test Code!</div>
</div>

CSS

#div1 {
  border: 1px solid red;
  height: 300px;
  font-size: 30px;
  background-color: beige;
}

JavaScript

$(document).ready(function() {

  $('#btn').on("click", function() {
    $('#div1')
      .css('overflow', 'hidden')
      .animate({
        opacity: 0.0,
        height: '0px'
      }, 450, "linear", function() {
        $(this).remove();
      });

  });
});