Jquery link effect only works once per page load?

Question

When I click "contact" then "about" the animations work correctly, however, if I then click "contact" again, the animation won't work. The page appears blank.

$(".contact-link").click(function() {
    if ($("#contact-page-wrap").is(":hidden")) {
        $("#contact-page-wrap").slideDown(400).queue(function() {
            $(".contact-block").slideDown(400);
        });;
    } else {
        $(".about-block").slideUp(400).queue(function() {
            $(".contact-block").slideDown(400);
        });;
    }
});

$(".about-link").click(function() {
    if ($("#contact-page-wrap").is(":hidden")) {
        $("#contact-page-wrap").slideDown(400).queue(function() {
            $(".about-block").slideDown(400);
        });;
    } else {
        $(".contact-block").slideUp(400).queue(function() {
            $(".about-block").slideDown(400);
        });;
    }
});

How can I make it run once per click for as long as the page is open?

Answer 1

I'm not sure that I understood completely your intentions, but have tou considered using .slideToggle()?

http://api.jquery.com/slideToggle/

It is a simpler way (if I understand correctly what you're trying to do)

PS: Java is a wrong tag! You should switch it to "Javascript".