jquery and jscript if else
<p>I'm using the code below to make a box appear when certain text is clicked. How do i limit it so only one box can be slid down at a time.</p>

<p>E.g. if i click the first button it slides down, then if i click the second button the first box slides up again?</p>

<p>Here's my code</p>

<pre><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt; 
$(document).ready(function(){
  $(".flip1").click(function(){
    $(".panel1").slideDown("fast");
  });
});
$(document).ready(function(){
  $(".flip2").click(function(){
    $(".panel2").slideDown("fast");
  });
});
$(document).ready(function(){
  $(".flip3").click(function(){
    $(".panel3").slideDown("fast");
  });
});
$(document).ready(function(){
  $(".flip4").click(function(){
    $(".panel4").slideDown("fast");
  });
});
&lt;/script&gt;



&lt;div id="betslip"&gt;
                &lt;td&gt;&lt;div class="panel1"&gt;&lt;?php echo $bet1; ?&gt;&lt;/div&gt;&lt;/td&gt;
                &lt;td&gt;&lt;div class="panel2"&gt;&lt;?php echo $bet2; ?&gt;&lt;/div&gt;&lt;/td&gt;
                &lt;td&gt;&lt;div class="panel3"&gt;&lt;?php echo $bet3; ?&gt;&lt;/div&gt;&lt;/td&gt;
                &lt;td&gt;&lt;div class="panel4"&gt;&lt;?php echo $bet4; ?&gt;&lt;/div&gt;&lt;/td&gt;
            &lt;/div&gt;
</code></pre>
