Playing with CSS Transitions

HTML

<div class="container">
    <div class="two">I slide!<br>And I am higher than the div before me...</div>
</div>

<footer>
  <ul>
  <li><a href="">Privacy Policy</a></li>
  <li><a href="#" class="one">Contact Us</a></li>
  </ul>
</footer>

CSS

footer {
  width:100%;
  background:#ccc;
  position: fixed;
  bottom:0;
  height: 40px;
  left:0;
  z-index: 1000;
}

.container {
    overflow:hidden;
    height: 40px;
    position: absolute;
    bottom:0;
    width: 100%;
    z-index: 1;
}
.one {
    position: relative;
    background-color: lightblue;
    cursor:pointer;
}
.two {
    position: relative;
    background-color: yellow;
    -webkit-transition: top 1s;
    -moz-transition: top 1s;
    -o-transition: top 1s;
    transition: top 1s;
}

JavaScript

var clicked=true;
$(".one").on('click', function(){
    if(clicked)
    {
        clicked=false;
        $(".container").animate({"bottom": "0px"});
    }
    else
    {
        clicked=true;
        $(".container").animate({"bottom": "40px"});
    }
});