Show / Hide DIV With Animation

I have a script which shows a div with an animation. What I would like to do is to have the div collapse when a link is clicked. At the moment, when the link is clicked, it just plays the animation again.

This is my code:
PHP Code:
<script type="text/javascript">
$(function(){
$("#navigation a").click(function(){ 
$(".content."+$(this).attr("class")).animate({height: "1px"},50);
$("[class^=content]").addClass("hide");
$("[class^=content]").removeAttr("style");
$(".content."+$(this).attr("class")).animate({height: "50px"},{duration: 1000, easing: "easeOutBounce"});
}); .....