Question

I have a feeling this answer is going to be very simple, but I can’t figure out what to even search for.

What I’d like to do is have one .click() event fire two functions in sequence. Function1 clears the intended area, and then function2 is supposed to .slideDown().

    function function1(){
    $(this).parents('#div').siblings().nextAll('#div').hide();
    };

function function2(){
    $(this).parents('#div').siblings().nextAll('#div').slideDown(1000);
    };

$("#div").click(function1 + function2);

I’ve tried the follow, to no avail…

    $("#div").click(function1, function2);
    $("#div").click(function1,function2);
    $("#div").click(function1 + function2);
    $("#div").click(function1+function2);

When function1 and function2 are fired independently, they work properly. It’s only when I try to fire them together.

Thank you very much in advance!

EDIT:
Oh, and the #div markers are only placemarker selectors.

Answer 1

You can pass a handler that calls your two functions in sequence.

In order for this to be properly bound, though, you have to use call() or apply() to invoke them:

$("#div").click(function() {
    function1.call(this);
    function2.call(this);
});

If you call the functions “naturally”, as other answers do, then inside function1() and function2() this will be bound to window (or to undefined in strict mode), not to the clicked element, so they will not behave as you expect.