Display one div at a time

Display one div at a time

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.
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.
I only want one DIV at a time. What should I modify in my javascript code
to do that?
$(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");
});
});
http://jsfiddle.net/U52rr/8/
Thanks for reading!