How to check if an element is hidden in jQuery?

MoreOnFew
Posted underjQuery

Whether you are new to jQuery or not, you must have come across a situation where you had to check if an element is hidden in jQuery. While this might sound like an easy task, it can get tricky. Don’t worry, you can check if an element is hidden in jQuery using the simple ways shown below.

Check if an element is hidden using jQuery :hidden selector

jQuery’s inbuilt selector “:hidden” can be handy when you want to check if an element is hidden on the page. The code for the same is as follows

jQuery Example to check if element is hidden

// This checks if the element has display:none. 
$(element).is(":hidden");

The above selector would check if the element is “hidden” in the sense that whether the element has display:none CSS property to it. Please note that this would not return true for an element that has visibility:hidden CSS property set to it. As per jQuery’s documentation the Elements with visibility: hidden or opacity: 0 are considered to be visible as they still take up space on the layout.

The “:hidden” selector would return true only for the elements that suffice the following conditions:

  • They have a CSS display:none value to it.
  • They are input elements with type=”hidden”.
  • Their width and height are set to 0.
  • A parent element is hidden, so the element is not shown on the page.

Here is an example of the output I was getting while trying out the :hidden selector in jQuery. In the code you can see that the element with CSS property visibility:hidden gives a false when we try to check if it is hidden. Whereas, the element with display:none returns true.

Example to check if an element is hidden in jQuery
Example to check if an element is hidden in jQuery using the “:hidden” selector.

Check if an element is truly hidden in jQuery

While jQuery’s “:hidden” selector does a good job in identifying “certain” types of hidden elements on the page, it still leaves out elements that are visibly hidden but take up space on the page. Elements with CSS property visibility:hidden would still not be recognized as hidden by jQuery. In order to include elements that have visibility:hidden too in your search for a hidden element, you can use the following code.

jQuery Example to check if element is hidden and also has visibility hidden

if ($(element).is(':hidden') || $(element).css("visibility") == "hidden") {
    // 'element' is truly hidden
}

The above code would check if the element is considered to be hidden by jQuery and also if the element is visibly hidden using the CSS visibility:hidden property. You can use this if you would like to cover elements that are both hidden and does not take up space (display:none), and those elements too which are hidden but takes up space(visibility:hidden). It would also cover the elements that are of input type hidden, that have width and height of 0, and also those which are hidden because their parent element is hidden.

TaggedHow-tojQueryJquery API


MoreOnFew.com – Read tutorials related to JavaScript, jQuery, HTML5, CSS3 and more !

Cover Image for How to check if checkbox is checked in jQuery?

How to check if checkbox is checked in jQuery?

It is very easy to check if a checkbox is checked in jQuery using the .is() or .prop() method of jQuery combined with the ‘:checked’ selector. There are other ways too like checking for the attribute checked value, however, they aren’t very reliable. The easiest and most stable way to check if checkbox is checked … Read more

MoreOnFew
Cover Image for [Solved] Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’

[Solved] Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’

You might be facing an “Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’ ” error if you are using the react-router-dom package version 6. This error is caused due to using the older switch syntax of the react-router-dom. From version 6 onwards, the react-router-dom has replaced “Switch” with “Routes”. Let us take a look … Read more

MoreOnFew