javascript - SlideUp effect with jQuery -

i'm working on website footer , if user clicks contact us yellow div appears behind footer.

here i'm working on far right now, can't seem position yellow box hidden behind footer. yellow area 300px in height when visible.

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

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;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  <div class="container">      <div class="two">i slide!<br>and higher 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>

thank you.

try one. uses jquery animate slide.

http://jsfiddle.net/armqc25a/

js

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

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; }