JSFiddle - React, Tailwind, and code Playground

by mblase75

HTML

<button id="menu-item-9">Click me</button>
<div id="repair-drop" class="hidden">Blah blah blah </div>

CSS

#repair-drop {
    background: green;
    border: 1px solid black;
    width: 200px;
    height: 500px;
    cursor: pointer;
    overflow: hidden;
}

.hidden{
    max-height: 0px;
    -webkit-transition: max-height 0.8s;
    -moz-transition: max-height 0.8s;
    transition: max-height 0.8s;

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

JavaScript

$(document).ready(function() {
    $('#menu-item-9').on('click', function(e) {
        $('#repair-drop').data('shown',true).addClass('visible');
    });

    $('#repair-drop').on('mouseleave', function(e) {
        $('#repair-drop').data('shown',false);
        setTimeout(function() {
            if (!$('#repair-drop').data('shown')) {
                $('#repair-drop').removeClass('visible');
            }
        }, 600);        
    });
});