javascript - Slide div in and out of viewport -

i'm trying achieve effect similar airbnb.com's home page , how works button.

i've been able following fiddle: http://jsfiddle.net/n89z4bz3/

however, i'm unable achieve slide effect fixing visible container bottom of slid in upper-container.

my jquery code here:

$(document).ready(function(){     var heightvar = 0 - $(window).height();     $('.upper-container').css('top',heightvar+'px');     $('.main-container').css('height', $(window).height()+'px');     $('.click-this').on('click', function(){         $('.upper-container').css('top', '0');         $('.main-container').css('margin-top',$('.upper-container').height()+'px');     }); }); 

my html setup follows:

<div class="upper-container">     hidden container </div> <div class="main-container">     visibile container     <div class="click-this">         click slide down     </div> </div> 

try this

http://jsfiddle.net/n89z4bz3/1/

$(document).ready(function() {    var heightvar = 0 - $(window).height();    $('.main-container').css('height', $(window).height() + 'px');    $('.click-this').on('click', function() {      $('.upper-container').animate({        height: '100px',        paddingtop: '40px'      }, 500);    });  });

.upper-container {    position: reltive;    width: 100%;    padding-top: 0px;    background: red;    height: 0px;    overflow: hidden;  }  .main-container {    background: blue;    position: relative;  }  .click-this {    background: #fff;    color: #333;    padding: 20px;    margin-left: 20px;    width: 300px;    margin-top: 40px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>  <div class="upper-container">    hidden container  </div>  <div class="main-container">    visibile container    <div class="click-this">      click slide down    </div>  </div>