}

How to check if an element is hidden in jQuery?

Created:

Check element is hidden with jQuery

In this brief article we will see how to handle display:hidden elements. When using jQuery if you need to check the element is hidden using "is" with ":visible" parameter.

$(element).is(":visible");

You can get some confustion between visible=false and display:none, but using :visible will also check if the parent elements are visible. The ":visible" is a jQuery extension and not part of the CSS specification, queries using :visible cannot take advantage of the performance boost provided by the native DOM.

Remember that elements with opacity: 0 are considered to be visible, since they still consume space in the layout.

Different ways to hide an element

The most used ways to hide elements are:

  • display:none hides the element. no space used.
  • visibility:hidden hides the element. space is used.
  • opacity:0 hides the element as "visibility:hidden". space is used.

Toggle visibility functions

There are some useful toggle functions, here are some examples os usage:

$('.click').click(function() {
  $('.target').toggle();
});

$('.click').click(function() {
  $('.target').slideToggle();
});

$('.click').click(function() {
  $('.target').fadeToggle();
});
dom