css - Slide in another div, from right to left, and adjust the height animated (jQuery) -

i have div login form , button "forgot password". have div forgot password form, want slide in, in front of login div , adjustig height, when "forgot button" clicked. entire box should positioned

illustration:

the html:

<div id="content">     <div id="box">         <div id="log_in">             <p>log in form</p>             <p>log in form</p>             <p>log in form</p>             <p>log in form</p>             <p>log in form</p>             <div id="forgot">forgot password?</div>         </div>         <div id="forgot_form">             <p>forgot form</p>             <p>forgot form</p>             <p>forgot form</p>         </div>     </div>  </div> 

css:

#content{   background-color: blue;   width:100%;   height:900px; } #box{   width: 200px;   position: relative;    top: 20px;    left: 14px;    display: block;   border:2px solid red;   background-color: white;   padding: 5px; } #forgot{   cursor: pointer;   color: blue; } 

this got far in jquery:

$(document).ready(function () {     $("#forgot_form").css({'display':'none'});     $("#forgot").on("click", function () {         $("#log_in").css({'display':'none'});         $("#forgot_form").css({'display':'block'});         $("#forgot_form").css({"left":"200px"}).animate({"left":"0px"}, "slow");     }); }); 

jsfiddle example: https://jsfiddle.net/rldfmf4n/4/

i think easier use css animation you're trying do. try adding css file

#forgot_form { position: absolute; left: -200px; width: 200px; height: 200px; -webkit-animation: slide 0.5s forwards; -webkit-animation-delay: 2s; animation: slide 0.5s forwards; animation-delay: 2s; }  @-webkit-keyframes slide { 100% { left: 0; } }  @keyframes slide { 100% { left: 0; } } 

now have write jquery trigger animation when clicked on link. (hint: use toggleclass())