JSFiddle - React, Tailwind, and code Playground

by ebiewener

HTML

<div class="main"></div>
<div class="btn">SlideDown</div>

CSS

.main {display:none; height:200px; width:300px; background:red}
.btn {display:inline-block; background:#ccc; border:2px solid #666; padding:4px 5px 3px 5px; font-family:Arial; font-size:15px; cursor:pointer; position:absolute; top:230px; left:5px}

JavaScript

$(function(){
    var mainDiv = $('.main');
    $('.btn').hover(function(){
        mainDiv.stop().slideDown(1000);
    },function(){
        mainDiv.stop().slideUp(1000);
    });
});