jQuery toggle and IF visible

jquery, toggle

Solution

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 »");


}

Problem

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?

Original source