JSFiddle - React, Tailwind, and code Playground

HTML

<div class='wrapper'>
    <div class='growIt'>Text for div</div>
</div>
<input type='button' id='showHide' value='Show / Hide'/>

CSS

.wrapper{
    background:blue;
    position:relative;
    width:200px;
    height:200px;
    overflow:hidden;
}
.growIt{
    background: red;
    position:relative;
    width:200px;
    height:200px;
    top:200px;
    left:200px;
    display:block;
}

JavaScript

$(function(){
    var hiding = true;
    $('#showHide').click(function(){
        if(hiding == true){
            hiding = false;
            $('.growIt').animate({top:'0px',left:'0px'},2000);    
        }else{
            hiding = true;
            $('.growIt').animate({top:'200px',left:'200px'},2000);    
        }
    });
    
});