CODEWITHSUNDEEP
jquerytoggle
user128081
user128081

Reputation:

jQuery toggle and IF visible

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?

Upvotes: 18

Views: 46504

Answers (3)

basim
basim

Reputation: 231

I think this code will work

$('#element').toggle('slow', function() {
    if($(this).is(':hidden')) { 
        $(this).text('This element is hidden.');
    }
    else {
        $(this).text('This element is visible.');
    }
});

Upvotes: 4

Ludovit Scholtz
Ludovit Scholtz

Reputation: 84

I prefer not to use separate functions because when one function does not need to be used twice, it is waste of code.. i believe this is easier to understand when someone comes to it..

$("#moreOptions").slideToggle('slow', function(){
     var $link = $("#lnkMoreOpt");
     $(this).is(":visible") ? $link.text("Less Options «") : $link.text("More Options »");
});

Upvotes: 1

redsquare
redsquare

Reputation: 78667

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


}

Upvotes: 45

Related Questions