Issue with is visible toggle?

Question

  $('.sub-menu').on('click', function(){
    var menu = $(this).parents('.row').next()
    $(menu).slideToggle();
    var text = $(menu).is(':visible') ? 'open' : 'close';
    $('.sub-menu-status').text(text);
  });

For some reason it only outputs close it never writes open.

Inspected code and tried this variation but get the same result as above:

  var text = $(menu).css('display') == 'none' ? 'open' : 'close';

Can someone help me understand this? Thanks.

jsFiddle update: http://jsfiddle.net/#&togetherjs=LlkSSawSsb

for some reason it jsFiddle is only allowing me to create a share session — MrPizzaFace, Aug 07 '14 at 02:49

score 0 · Accepted Answer · edited May 23 '17 at 12:20

From this question I get that is(':visible') will be checking when the slideToggle transition starts. So it always returns true.

Try this

$('.sub-menu').on('click', function(){
    var menu = $(this).parents('.row').next()
    var text = $(menu).is(':visible') ? 'close' : 'open';
    $(menu).slideToggle();   
    $('.sub-menu-status').text(text);
  });

DEMO

Or DO it in callback of slideToggle

 $('.sub-menu').on('click', function(){
    var menu = $(this).parents('.row').next()
    $(menu).slideToggle(function() {
        var text = $(menu).is(':visible') ? 'open' : 'close';
        $('.sub-menu-status').text(text);
    })
  });

DEMO

Issue with is visible toggle?

1 Answers1