JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<div class='toggleWrapper'>
<a href="#" class="toggleLink">Click Here</a>
    <div class="toggledDiv">This is the content of the toggled div</div>
</div>

CSS

.toggledDiv {
    height:100px;
    background: yellow;
    overflow: hidden;
}
.alwaysVisible {
    height:80px;
    background: #ccc;
}
.toggleLink {
    display:block;
    width:100%
}

JavaScript

$('a.toggleLink').mouseover(function () {
        $('.toggledDiv').animate({
            height: 80
        }, 500);
})
$('.toggleWrapper').mouseleave(                    
function(){
        $('.toggledDiv').stop().animate({
            height: 0
        }, 500);

});