In jQuery, how can I tell if the current object is hidden or not?

Question

Hi,

Before I call:

$('myObject').show();

I want to know if it is currently hidden or visible.

Answer 1

You can test this with the css() function:

if ($('myObject').css('display') == 'none') {
  $('myObject').show();
}

EDIT:

Wasn't aware of how cool the :hidden selector is. My suggestion is still useful for testing other attributes, but Alex's suggestion is nicer in this case.

Answer 2

There's 2 ways to do it, that I know of:

if ($('#something').is(':hidden')) { }

or

if ($('#something').is(':visible')) { }

They should both work.

You can also do something like this:

$('#something:hidden').show();
$('#something:visible').hide();

Which will only call .show() if the item is already hidden, or only call .hide() if the item is already visible.

Answer 3

You could also use the Toggle $(this).toggle();

Answer 4

From jQuery FAQ:

 var isVisible = $('myObject').is(':visible');
 var isHidden = $('myObject').is(':hidden');