How to check element is visible or not in JQuery?

How to check element is visible or not in JQuery?

It is a short tutorial on Checking whether a div is visible or not in Jquery.

In Html elements can be shown or hidden using below three 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>

It results in three divs displayed to the browser. as like

element1
element2
element3

Let’s make some style changes using display and visibility to hide element1 and element2

element1’s div is hidden using 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 as follows Display:none

  • It does not allocate space for this element
  • these element is not visible on the rendered page
  • You can still use DOM events to interact with this.

visibility:hidden

  • The element is not visible on the browsers
  • It allocates space for this element and empty
  • manipulate with DOM event is possible

How to check if Div is visible

Jquery provides its function with a visible attribute.

if div is display:none,

  • is(‘:visible’) returns false

  • is(‘:hidden’) - returns true if 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 div is visible or not we can use is(‘:hidden’) or is(:visible) based on display or visibility.

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

To check whether div is visible or not we can check in the following cases.

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

}

or with CSS selector with display property is equal to none

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

how to check 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 CSS selector

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

Conclusion

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