How to check element is visible or not in JQuery?


This is an short tutorial on Checking an div is visible or not in Jquery.

In Html element can be shown or hide 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>

This results three divs are displayed to 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, Where as element2 is hidden with visibility:hidden

.element1{
  display:none;
}
.element2{
  visibility:hidden;
}
And you can see in the browser
```markup

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 allocate space for this element and empty
  • manipulate with DOM event is possible

How to check if Div is visible

Jquery provides is function with :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 visibility:hidden attribute.

To check div is visible or not we can check in 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 an div is hidden using jquery

Like mentioned above, you can use visible selector, You can use the following syntax

$(elementselector: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

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.