jQuery Check if an Element Is Hidden

• jQuery Check if an Element Is Hidden
• jQery is(selector)
• Check for Hidden using is() function
• Checks for Visible
• Use hidden selector to find out hidden or visible

jQuery Check if an Element Is Hidden

Elements can be hidden for several reasons:

• They are form elements with type=“hidden”
• They have a CSS display value of none
• Their width and height are explicitly set to 0
• An ancestor element is hidden, so the element is not shown on the page

Elements with visibility: hidden or opacity: 0 are considered to be visible, since they still consume space in the layout. During animations that hide an element, the element is considered to be visible until the end of the animation.

So, How could we check if an element is hidden or visible using jQuery? jQuery is function can easily identify an element is hidden or visible. The jQuery is() function returns boolean.

jQery is(selector)

A string containing a selector expression to match elements against.

Check for Hidden using is() function

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

Checks for is(":visible")

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

Use hidden selector to find out hidden or visible.

// Matches all elements that are hidden
$('element:hidden')

// Matches all elements that are visible
$('element:visible')

You can also use css method to find out visibility and hidden but it is not recommended because it does not consider the visibility of the parent. To consider the parent as well, we have to use .is(":hidden") or .is(":visible").

<div id="div1" style="display:none">
  <div id="div2" style="display:block">Div2</div>
</div>

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