JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.greensock.com/js/src/TweenMax.min.js"></script>
<div id="tabContainer">
    <div class="tabSection" id="tab1">
        <p>click me</p>
    </div>
</div>

CSS

#tabContainer{
    position:relative;
    width:400px;
    height:400px;
    background-color:#efefef;
    overflow:hidden;
}
.tabSection{
    position:absolute;
    top:380px;
    background-color:#ccc;
    width:400px;
    height:120px;
}

#tab1{
  cursor:pointer;
background:#ccc url(http://lorempixel.com/output/transport-q-c-640-480-7.jpg) no-repeat 0px 20px;
}

.active{
    background-color:#fcc;
}

JavaScript

var tab1 = $("#tab1");

tab1.click(function(e){
    if( $(this).hasClass('active')){
        //move down
        TweenLite.to($(this), .5, {css:{top:380}}); 
        $(this).removeClass('active');        
    } else {
        //move up
        TweenLite.to($(this), .5, {css:{top:280}});
        $(this).addClass('active');
    }        
});