JSFiddle - React, Tailwind, and code Playground

by Alin Guta

HTML

<div class="more"><div id="trigger">click</div></div>

CSS

body, html {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
.more {
    width:50px;
    height:50px;
    background:#999;
    padding:0;
    z-index:1;
    position:relative;
}
#trigger{
    background:#ebebeb;
}

JavaScript

$( "#trigger" ).click(function() {
    $(".more").animate({
        height: $(window).height()
    }, 1000, function() {
        // function that runs when animation finished
    });
});