Question

I’m trying to run two different sets of functions, based on whether or not an element is visible when another element is clicked. Here is the whole function:

$('#grid').click(function() {
  if('#photo_grid:hidden') {
    $('#grid').addClass('active').removeClass('fadein');
    $('.cycle-slideshow').fadeTo('fast',0.3);
    $('#photo_grid').fadeIn('slow');
  } else {
    $('#grid').addClass('fadein').removeClass('active');
    $('#photo_grid').fadeOut('fast');
    $('.cycle-slideshow').fadeTo('slow',1.0);
  }
});

This results in the classes being added/removed from #grid and .cycle-slideshow being faded to 30% on the first click, as required. #photo_grid does not fade in, however, and subsequent clicks fail as a result. Can anyone suggest why this might be?

Page is live here, with the #grid button being the lower-rightmost one.

Answer 1

The problem with your if is that you’re effectively testing for the presence of a string, whereas what you’re trying to do is respond to the visibility of an element. Therefore I’d suggest either:

if ($('#photo_grid:hidden').length)

Or:

if ($('#photo_grid').is(':hidden'))

The .length check ensures that there is one, or more, items returned by the selector (as jQuery always returns an array (even if it’s an empty array), whereas the is() method returns a Boolean to reflect the element is matched, or unmatched, by the selector passed to the method.

References:

• is().