call function after slidetoggle complete

Question

$(document).ready(function () {
    $("#newrecord tr:odd").addClass("odd");
    $("#newrecord tr:not(.odd)").find("li").hide();
    $("#newrecord tr:not(.odd)").hide();
    $("#newrecord tr:first-child").show();

    $("#newrecord tr.odd").click(function () {
        $("#newrecord tr:not(.odd)").show();
        $(this).next("tr").find("li").slideToggle("slow","swing");
    });
});

The following first hides all the even rows and when we click on the odd row it displays the even row and the slides down the li content of each row. I need help with when I click again the li tag slides up as I want it, but it should also hide the row. that is should call hide function on the row after slide up.

Answer 1

$(document).ready(function () {
    $("#newrecord tr:odd").addClass("odd");
    $("#newrecord tr:not(.odd)").find("li").hide();
    $("#newrecord tr:not(.odd)").hide();
    $("#newrecord tr:first-child").show();

    $("#newrecord tr.odd").click(function () {
        $("#newrecord tr:not(.odd)").show();
        $(this).next("tr").find("li").slideToggle("slow","swing", function(){
            //What to do on toggle compelte...
        });
    });
});

Answer 2

Lwyrn is correct, adding the third parameter to the slideToggle call will do it. For more control yet you can pass a plain object with all of the options you'd like as a parameter ( eg. .slideToggle( options )). You can read more about what those options can do at : http://api.jquery.com/slideToggle/#slideToggle-options

I find it useful to pass the object when I don't want the animation to queue (if a user clicks 50 times really fast, the animation will stack and keep toggling for a while -- undesired behavior).