title: Display one div at a time
body: <p>When I click on a link on the menu, a div slides down to show some contents. But the problem is, I only want one div at a time. </p>
  
  <p>As you can see on the fiddle, if you click on one link, a div appears, if you click on another link, another div appears below the the first div. </p>
  
  <p>I only want one DIV at a time. What should I modify in my javascript code to do that?</p>
  
  <p>PS: I want my div to hide if I click on the same link again :</p>
  
  <p>Click "HOME" -> Show div
  Click "HOME" -> close div</p>
  
  <pre><code>    $(document).ready(function(){
  
    $("#flip").click(function(){
      $("#panel").slideToggle("fast");
    });
     $("#flip2").click(function(){
      $("#panel2").slideToggle("fast");
    });
       $("#flip3").click(function(){
      $("#panel3").slideToggle("fast");
    });
       $("#flip4").click(function(){
      $("#panel4").slideToggle("fast");
    });
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/U52rr/8/" rel="nofollow">http://jsfiddle.net/U52rr/8/</a></p>
  
  <p>Thanks for your answers guys, I really appreciate your help !</p>