JSFiddle - React, Tailwind, and code Playground

by surakrai

HTML

<div id="slide-pane">
    <img src="http://www.pushdownbanners.com/images/homepage_banner_large.jpg">    
    <a id="button"></a>
</div>

CSS

#slide-pane {
    position:absolute;
    width: 935px;  
    height: 40px;    
    top: 0px;
    overflow: hidden;
    background-color: #33339F;
}
#button{
    position: absolute;
    width: 935px;
    height: 40px;
    bottom: 0px;
    right: 0px;
    background: url(http://www.pushdownbanners.com/images/homepage_banner.gif);
}
#button.close{
    background: transparent;
}

JavaScript

$("#button").data("open", false);

$("#button").click(function() {
    if ($(this).data("open") == false) {
        $("#slide-pane").animate({
            height: '+=410'
        }, function(){ 
            $("#button").attr("class","close"); 
        });
        $(this).data("open", true);
    }
    else {
        $("#slide-pane").animate({
            height: '-=410'
        }, function(){ 
            $("#button").attr("class","open");
        });
        $(this).data("open", false);
    }
});