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.