JSFiddle - React, Tailwind, and code Playground

by Jeremy Hawes

HTML

<div class="a">
    <p>Hover Me</p>
    <div class="box">
        Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text
    </div>
</div>

CSS

.a {
    width: 100px;
    height: 200px;
}
.box {
    width: 500px;
    height: 0px;
    height: 0;
    overflow: hidden;
}
.box.active {
    outline: 1px solid #ccc;
}

JavaScript

$('.a p').hover(function () {
    if ($('.box').hasClass('active')) {
        $('.box').removeClass('active');
        $('.box').stop(true, false).animate({height: "0px"}, 500);
    } else {
        $('.box').addClass('active');
        $('.box').stop(true, false).animate({height: "20px"}, 500);
    }
});