Question

What i’m trying to do is avoid having both #login and #signUp displayed at the same time, so is there a check i could do that if the other is currently being shown, first slide it up and then carry on with the slidedown of the clicked trigger?

Does that make sense?

                    $("#loginBtn").click(function(){
                        $("#login").slideToggle();
                        return false;
                    });

                    $("#signUpBtn").click(function(){
                        $("#signUp").slideToggle();
                        return false;
                    });

Answer 1

You can check if the other element is visible before you call slideToggle by using is(":visible"), you invoke the is method on a selector and specify the :visible selector in the is method:

$("selector").is(":visible")

It will return either true or false. To implement this in your current code you would do so like this:

$("#loginBtn").click(function(){
    if($("#signUp").is(":visible")) $("#signUp").slideToggle("fast", slideLoginCallback);
    else slideLoginCallback();

  function slideLoginCallback(){
        $("#login").slideToggle();
    }

    return false;
});

$("#signUpBtn").click(function(){
    if($("#login").is(":visible")) $("#login").slideToggle("fast", slideSignUpCallback);
    else slideSignUpCallback();

  function slideSignUpCallback(){
        $("#signUp").slideToggle();
    }

    return false;
});

So this will check if #signUp is visible first and if it is, it will hide it. After the #signUp has been hidden, the #login will show. If #signUp is not visible, #login will just show. The same for #logIn but the other way around.