JSFiddle - React, Tailwind, and code Playground

by ncapito

HTML

<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<a href="#" id="toggleLink">Click Here</a>

<div class="toggledDiv">This is the content of the toggled div</div>
<div class="alwaysVisible">This is the content of the always visible div</div>

CSS

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

JavaScript

var toggleState = true;
$('#toggleLink').hover(function () {
    if (toggleState) {
        $('.toggledDiv').stop().animate({
            height: 80
        }, 500);
    } else {
        $('.toggledDiv').stop().animate({
            height: 0
        }, 500);
    }
    toggleState = !toggleState;
    return false;
});