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


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

As you can see in the browser


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.


  • 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('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.



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)

The same can be written using CSS selector

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


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

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
You'll get a notification every time a post gets published here.