使用相同的可点击链接显示/隐藏Div？

Question

i recently came across this script:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#showdiv").click(function(){
$(".dropdowndiv").slideDown(500);
});

$("#hide").click(function(){
$(".dropdowndiv").slideUp(500);
});

});

</script>

which i use to show and hide a div at the top of my page that bring down the entire page. The code works simply enough, you click on a link it slides the page down showing the div, you click on another link it hides the div, this all while doing a slid in and out motion. I was wondering if there was a way to instead of clicking on two different links i could use the fist link to slide open and slide the div closed?

You can see a live preview on my tumblr here: cielprince.tumblr.com

Answer 1

you mean, using slideToggle :

$("#showdiv").click(function () {
    $(".dropdowndiv").slideToggle("slow");
});

Answer 2

$("#showdiv").click(function () {
   $(".dropdowndiv").stop().slideToggle();
});

.stop is done to prevent queuing of animations on repeated clicks.