Javascript Sliding Tab From Right Side Not Working

Question

I am almost done creating sliding tabs on this website: http://www.imaginationmuzic.com and the last step is the right side sliding tab is not sliding correctly. As you can see after it starts open, opens further after one click and seems to close after the 3rd but really makes the site wider allowing the user to scroll to see it hidden...

here is my code:

CSS

#panel2{ 
height:500px;
width:200px;
background-color:#333;

 } 
#contact2{ 
position:relative;
 top:-400px;
right:40px;
width:40px; 
height:168px; 
background:url(/images/twitter-panel.png); 

} 
#container2{ 
position:relative;
right:0px;
z-index:5;
position:absolute;
top:110px;
}

Javascript

script type="text/javascript">
$(document).ready(function(){
var pos='in';
$("#contact2").click(function(){
if(pos=='in'){
  $("#container2").animate({right:'200px'
});
  pos='out';
 }
else
{
$("#container2").animate({right:'-200px'
});
pos='in';
} 
});
});


</script>

and HTML:

<div id="container2">

<div id="panel2"></div> 
<div id="contact2"> </div>
</div>

Thank you to anyone who can assist!

Answer 1

You want to animate back to right: '0' not right: '-200px' if you want it to go back to the original position.

Or you could add overflow-x: hidden; to the body to stop the scrolling.

CSS

body {
    overflow-x: hidden;
}