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%;
  display:block;
  background:#ccc;
  position:fixed;
  bottom:0;
  left:0
}

.container {
    overflow:hidden;
    height: 60px;
    float:left;
}
.one {
    position: relative;
    bottom: 0;
    background-color: lightblue;
    z-index: 1;
    cursor:pointer;
    overflow: hidden;
    height: 40px;
}
.two {
    position: relative;
    bottom: 40px;
    background-color: yellow;
    z-index: -1;
    -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;
        $(".two").css({"top": 0});
    }
    else
    {
        clicked=true;
        $(".two").css({"top": "40px"});
    }
});