check if element is visible jquery

How to Check if Element is Visible or Hidden Using jQuery

jQuery is a popular JavaScript framework that allows you to easily manipulate DOM elements on web pages. You can easily show, hide or toggle visibility of DOM elements using show(), hide() and toggle() functions respectively. But sometimes you may need to check if a certain DOM element is visible or not on your page. In this article, we will learn how to check if element is visible or hidden using jQuery.


How to Check if Element is Visible or Hidden Using jQuery

You can easily check a DOM element’s visibility using is() function as shown below.

// checks if element is visible
$(element).is(":visible");

// checks if element is hidden
$(element).is(":hidden");

The first function checks if the element is visible or not, and returns true if it is visible, returns false otherwise. It checks for CSS display:[none|block] and ignores visibility:[true|false]. The second function checks if the element is hidden or not. If the element is hidden it returns true, if it is not then the function returns false.

You can use id selector to identify the element. For example, if you have the following div.

<div id="myDiv" class="classDiv">
 ...
</div>

then you can use the is() function for this element, as shown below.

$('#myDiv').is(":visible");
OR
$('#myDiv').is(":hidden");

Alternatively, you can also use visible selector to check if element is visible, or hidden selector to check if element is hidden.

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

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

For example, if you want to check if the above defined div is visible or not use the following commands.

$('#myDiv:hidden')
OR
$('#myDiv:visible')

But please note, using hidden or visible selector is slightly slower than using is() function, which does not matter in most cases. If you use is() function or hidden/visible selector for single element, they will return true or false based on the visibility of that element alone. But if you use it for multiple elements, they will return true if even one of the selected elements matches the condition. Let us see with an example.

Instead of using #myDiv, let us you use $(‘.classDiv:visible’) to check visibility of all elements with class=’classDiv’. This will select all HTML elements on your page with class name=classDiv. If even one of them is visible, the selector will return true. Same is true with all the following commands.

$('.classDiv').is(":visible");
OR
$('.classDiv').is(":hidden");
OR
$('.classDiv:hidden')
OR
$('.classDiv:visible')

So when you want to check visibility of multiple elements, it is better to loop through them one by one and check each element’s visibility using above commands. Here is an example to check visibility of each div with class=’classDiv’ on your page.

$('.classDiv').each(function(){
  console.log($(this).is(':visible'));
});

Please note, the above methods check the visibility of parent elements as well. For example, let us say you have a nested div as shown below.

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

If you use :visible selector on div2 then it will return false, even though its visibility is not hidden, as evident from its style attribute. This is because its parent div1 is hidden and so even div2 becomes hidden. This aspect is considered by :visible or :hidden selectors.

If you do not want this behavior, then it is better to directly check the CSS of the said element as shown below.

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

Here is an example to specifically check if only the element (excluding its parent) is visible or hidden.

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

In this article, we have learnt how to check if an element is visible or not, using jQuery. There are many other ways to do this, we just selected a couple of simple ones for you.

Also read:

Set NGINX to Catch Unhandled Virtual Hosts
How to Do Case Insensitive Rewrite in NGINX
How to Forward Request to Another Port in NGINX
How to Check if Key Exists in Python Dictionary
How to Get Random Number Between Two Numbers in JavaScript

Leave a Reply

Your email address will not be published. Required fields are marked *