How to check element is visible or not in JQuery?

How to check element is visible or not in JQuery?

This is a brief tutorial on determining whether a div is visible or not using jQuery.

In HTML, elements can be shown or hidden using three common approaches:

  • display -block/none
  • visibility - hidden/none
  • opacity - 0 to 1

For example,

<div class="element1">element1</div>
<div class="element2">element2</div>
<div class="element3">element3</div>

This results in three divs displayed in the browser as follows:

element1
element2
element3

Let’s make some style changes using display and visibility to hide element1 and element2. element1 is hidden using the display: none attribute, whereas element2 is hidden with visibility: hidden.

.element1{
  display:none;
}
.element2{
  visibility:hidden;
}
```
As you can see in the browser
```bash
element3
  • The Difference Between display: none and visibility: hidden

Display:none

  • Does not allocate space for the element
  • The element is not visible on the rendered page
  • DOM events can still interact with it

visibility:hidden

  • The element is not visible on the browser
  • Space is allocated for the element, but it is empty
  • DOM manipulation is possible

How to Check if a Div is Visible

jQuery provides its function with a :visible attribute. If a div is display: none:

  • is(‘:visible’) returns false
  • is(‘:hidden’) returns true

If a div is visibility: hidden:

  • is(‘:visible’) returns false
  • is(‘:hidden’) returns true

The same can be rewritten using $('.element1:hidden') or $('.element2:visible') syntax.

var isElement1Visible = $(".element1").is(":visible");
var isElement1Hidden = $(".element1").is(":hidden");

var isElement2Visible = $(".element1").is(":visible");
var isElement2Hidden = $(".element1").is(":hidden");
console.log("isElement1Visible", isElement1Visible); // false
console.log("isElement1Hidden", isElement1Hidden); // true
console.log("isElement2Visible", isElement2Visible); // false
console.log("isElement2Hidden", isElement2Hidden); // true

To check if a div is visible or not, you can use is(‘:hidden’) or is(:visible) based on the display or visibility.

You can also set opactiy:0 which is similar to the visibility: hidden attribute.

You can also check using CSS selectors with the display property set to none:

if($(.element1).is(':hidden')){

}

or with CSS selector with display property is equal to none:

if( $(.element1).css('display') == 'none' ){
}

How to Check if a Div is Hidden using jQuery

As mentioned above, you can use the :visible selector. You can use the following syntax.

$(element selector:visible)
$(elementselector:hidden)

The same can be written using a CSS selector.

$(element selector).css('display') == 'none' or
$(element selector).css("visibility") == "hidden"

Conclusion

An HTML element can be hidden using display: none, visibility: hidden, or opacity: 0. There are jQuery CSS conditional selectors mentioned above to check if an element is visible or not based on your layout design.