jQuery Check if element is hidden
Using jQuery there are many ways to check if a HTML Element is hidden or not. In this tutorial, we shall look into some of the ways with examples.To check if an element is hidden in jQuery, there are two ways :
1. Use jQuery Selector on the element and :hidden value.
if( $( "element:hidden" ).length ){
} 2. Get the CSS display attribute of the element and check if it is ‘none’.
if( $(" element ").css("display") == "none" ){
} Examples – jQuery Check if element is hidden
The following examples help you understand how to check if an element is hidden using jQuery.
1. Example – Check if HTML Element is hidden
In the following example, paragraph with id=”pa” has display style attribute set to none. We shall check if the element is hidden using jQuery.
2. Example – Check if HTML Element or any of its ancestors are hidden
In the following example, paragraph with id=”pa” has display style attribute set to block. But its parent (DIV) is hidden. We shall check if the element is hidden using jQuery.
3. Example – Using CSS display attribute, check if element is hidden
In the following example, we use CSS display attribute value. If the value is ‘none’, then the element is hidden.
Conclusion
In this jQuery Tutorial, we have learnt how to check if an element is hidden using jQuery, with the help of examples.