Question

This should be a simple one but since im a bit tied on time i figured id ask… Anyways I was just wondering how could I make two things toggle for eg. I want a div to show then hide (slide effect) and at the same time the link that does this effect to change text… I have this code currently…

/* Show/Hide */
$("#statusDisplayH").live("click", function(){
    $("#statusH").slideToggle("medium");


    if($("#statusH").is(":visible"))
    {
        $("#statusDisplayH").text("HIDE");
    }
    else
    {
        $("#statusDisplayH").text("SHOW");
    }
});

where statusH is the div to show/hide and statusDisplayH is a link “a href…” and of course the link is not inside the div… Thanks in advance for the help!

Answer 1

Use the callback on .slideToggle():

/* Show/Hide */
$("#statusDisplayH").live("click", function(){
    var toToggle = $("#statusH");
    toToggle.slideToggle("medium", function(){
        $("#statusDisplayH").text( toToggle.is(":visible") ? "HIDE IT" : "SHOW IT"); 
    });
});