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


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?

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]

// The same works with hidden

You can use the hidden selector:

// Matches all elements that are hidden
And the visible selector:

// Matches all elements that are visible

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


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

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

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