jQuery Vertically show hide a div

by ravimallya

HTML

<div class="container">
    <div class="filter-outer">
        <div class="filter-content">
            <div class="filter-handle"></div>
        </div>
    </div>
    <div class="results"></div>
</div>

CSS

body {
    margin:0;
    padding:0;
}
.container {
    background:aqua;
    position:relative;
    min-height:500px;
}
.filter-outer {
    background:#fcfcfc;
    position:absolute;
    width:200px;
    min-height:200px;
    margin-left:0;
    left:-200px;
}
.filter-content {
    position:relative;
    width:200px;
    min-height:200px;
    background:#ccc;
}
.filter-handle {
    float:right;
    margin-right:-20px;
    width:20px;
    height:20px;
    background:yellow;
    position:absolute;
    top:0;
    right:0;
}

JavaScript

$(function () {
     var flag = 0;
     $('.filter-handle').click(function (e) {
         e.preventDefault();
         if (flag === 0) {
             $('.filter-outer').stop().animate({
                 'left': '0px'
             }, 500);
             flag = 1;
         } else if (flag === 1) {
             $('.filter-outer').stop().animate({
                 'left': '-200px'
             }, 500);
             flag = 0;
         }
     });
 });