Hidden sliding menus - Help to clean up code
<p>I am a new learner of javascript &amp; jquery coding.</p>

<p>I have botched some code together to get my desired result 
(3 tabs which when clicked, alternate between menus which scroll in from the left)</p>

<p>Clearly the code is excessive. </p>

<p>Can someone advise on / create a short version of this code for me, 
and also suggest any good reading material for the best procedures / logic for writing functions?</p>

<pre><code>&lt;script&gt;
$(document).ready(function() {
 menuout = 0;
 $("#menutab").click(function(){
 if(menuout==0){
 $("#menuhide").show(400);
 $("#menuhide").animate({marginLeft: "0px"}, 400 );
 $("#stathide").hide(400);
 $("#pershide").hide(400);
 menuout=1;
 statout=0;
 persout=0;
 } else {
 $("#menuhide").animate({marginLeft: "-190px"}, 400 );
 menuout=0;
 }
 });
});
&lt;/script&gt;

&lt;script&gt;
$(document).ready(function() {
 statout = 0;
$("#stattab").click(function(){
 if(statout==0){
 $("#stathide").show(400);
 $("#stathide").animate({marginLeft: "0px"}, 400 );
 $("#menuhide").hide(400);
 $("#pershide").hide(400);
 statout=1;
 menuout=0;
 persout=0;
 } else {
 $("#stathide").animate({marginLeft: "-190px"}, 400 );
 statout=0;
 }
 });
});
&lt;/script&gt;
&lt;script&gt;
$(document).ready(function() {
persout = 0;
$("#perstab").click(function(){
 if(persout==0){
 $("#pershide").show(400);
 $("#pershide").animate({marginLeft: "0px"}, 400 );
 $("#menuhide").hide(400);
 $("#stathide").hide(400);
 persout=1;
 menuout=0;
 statout=0;
 } else {
 $("#pershide").animate({marginLeft: "-190px"}, 400 );
 persout=0;
 }
 });
});
&lt;/script&gt;
</code></pre>

<p>first time ive used jfiddle, but here goes: <a href="http://jsfiddle.net/FFUa2/" rel="nofollow">http://jsfiddle.net/FFUa2/</a></p>
