Question

I have a button which toggles the visibility of a <div> below it and want to modify the text on the button depending on the visibility of said <div>.

Here is a live demo on jsFiddle

If you click on “Saved Data”, the first time it works correctly, but the next time you click the text does not change. This in itself is behaviour that I don’t understand.

Now, I could use multiple handlers for slideToggle(), however, elsewhere in the code I also set intervals which load data next to “Cookie data:” and “Server data:”. I don’t want these intervals to do anything if the <div> is not visible so I use something like this:

    this.timer_cookiedata = setInterval(function(){
        if (!$savedData.is(':visible'))
        {
            return null;
        }
        // ..
    });

I’m worried these intervals are not going to work properly because of this is(':visible') business. So the question is, why does this happen (else statement is ignored), and what can I do to mitigate this?

Answer 1

Check out the updated fiddle. When you check for visibility right after you call slideToggle, jQuery may not have updated the visibility of the element yet since the animation takes some time to finish. For this exact reason, slideToggle has a callback you can use to perform operations after the animation has finished:

$(function () {
    var $savedData = $('#savedData');
    $('#btn-savedData')
        .click(function () {
        var $button = jQuery(this);

        //I'm checking the visibility in the callback. Inside the callback, 
        //I can be sure that the animation has completed and the visibility 
        //has been updated.
        $savedData.slideToggle('fast', function () {
            if ($savedData.is(':visible')) {
                $button.html('visible');
            } else {
                $button.html('not visible');
            }

        });
    });
});​