jQuery toggle and IF visible

Question

Hi,

I have a div which contains settings and options on an account management page.

                $("#moreOptions").slideToggle('slow');
            if ($("#moreOptions").is(":visible") == true) {
                $("#lnkMoreOpt").text("Less Options «")
            }
            else {
                $("#lnkMoreOpt").text("More Options »")
            }

The code above should change the text of the more/less options link depending on whether it is visible or not, however it appears jquery does not treat toggling as making it invisible/visible.

How can i implement this while still using the toggle function?

Thanks

Answer 1

You need to use the callback function. By the time the if statement is evaluated the slideToggle will not have completed and you will get incorrect results.

$("#moreOptions").slideToggle('slow', callbackFn);

function callbackFn(){

     var $link = $("#lnkMoreOpt");

     $(this).is(":visible") ? $link.text("Less Options «") : $link.text("More Options »");


}