How would I check if an element is hidden in jQuery?

· · 3344 views

Is it possible to toggle the visibility of a element, utilizing the functions .hide(), .show() or .toggle()?

How might you test if an element is visible or hidden?

0
3 Answers

We utilize jQuery's is() method to check the selected element with another element, selector, or any jQuery object. This method traverses along the DOM elements to find a match, which fulfills the passed parameter. It will return true if there is a match, otherwise return false.

// Checks CSS content for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");

// The same works with hidden
$(element).is(":hidden");
0

You can use the hidden selector:

// Matches all elements that are hidden
$('element:hidden')
And the visible selector:

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

You can use use .is(":hidden") or .is(":visible").

Example:

<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
}
0

Please login or create new account to participate in this conversation.