JSFiddle - React, Tailwind, and code Playground

by fresheyeball

HTML

<div id="repair-drop"></div>
<div id="menu-item-9"></div>

CSS

.hidden{
    max-height: 0px;
}
.visible{
    max-height: 500px;  
}

#repair-drop{
    width:200px;
    height:200px;
    background:teal;
    -webkit-transition: max-height 0.8s;
    -moz-transition: max-height 0.8s;
    transition: max-height 0.8s;
}

#menu-item-9{
    width:10px;
    height:10px;
    background:darkred;
    margin:10px;
}

JavaScript

$(document).ready(function () {
  $('#menu-item-9').click(function () {
    $('#repair-drop').removeClass('hidden');
    $('#repair-drop').addClass('visible');
  });
  $('#repair-drop').on('mouseleave', function (e) {
    setTimeout(function () {
      $('#repair-drop').removeClass('visible').addClass('hidden');
    }, 600);
  });
});