javascript - jQuery parent animate second click (close/roll back) not working -

i'm having problem getting function animate work on second/closing click. works on first click though... here's code:

html:

<div id="about">   <div id="aboutbtn-content">lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>   <div id="aboutbtn">about me</div>   <div class="social-icons">     <a href="#"><img src="http://placehold.it/43x43"></a>     <a href="#"><img src="http://placehold.it/43x43"></a>   </div> </div> 

css:

#about {   background: #336699;   height: 561px;   width: 300px;   position:absolute;   top: 0%;   right:-285px; }  #aboutbtn {   background: #336699;   background-size: contain;   background-repeat: no-repeat;   width: 85px;   height: 35px;   text-align: center;   padding: 35px 10px;   font-size: 18px;   cursor: pointer;   color: #fff;   position: absolute;   left: -85px;   margin-top: 20px;   margin-right: 15px;   display: block !important; }  #aboutbtn-content {   float: left;   padding: 35px 30px; }  .social-icons {   position: absolute;   left: -63px;   top: 140px; }  .social-icons img {   display: block;   margin-bottom: 10px; } 

javascript:

$(document).ready(function () { $("#aboutbtn").click(function () {     $(this).parent().animate({         right: '-280px'     }, {         queue: false,         duration: 500     }); }, function () {     $(this).parent().animate({         right: '0px'     }, {         queue: false,         duration: 500     }); }); }); 

i have made jsfiddle can see clicking here.

i got inspiration from fiddle, difference changed toggle click.

i'm not sharpest js-coder, please bear me :d. i'll appreciate answer!

thanks in advance!

here simplified method without overhead of adding classes dom elements querying dom elements on , on again.

basically set variable open false, on click check see if open false, if set open true (because open now) open it, if not set open false , close it

(demo)

var open = false; $("#aboutbtn").click(function () {     if(!open) $(this).parent().animate({ right: '0px'}, 500);     else $(this).parent().animate({ right: '-285px'}, 500);     open = !open ? true : false; });