jQuery: how to check if an element is hidden? (guide for beginners)

Introduction: why this question concerns every frontend developer

Imagine a situation: you are writing an interactive page with a dropdown menu, modal window, or accordion. The user clicks a button, and the block should smoothly appear or disappear. But what if you accidentally try to animate an already hidden element? Or, conversely, show something that is already visible? The result — bugs, a jittery interface, and disappointed users.

That is why the question "How do I check if an element is hidden in jQuery?" is one of the most popular on Stack Overflow. It has over a thousand answers, and this is no coincidence. The ability to correctly determine element visibility is a basic skill that will save you hours of debugging.

In this article, we will thoroughly examine how to check if an element is hidden using jQuery. You will learn about pitfalls, differences between display:none and visibility:hidden, and how to write reliable code. Let's go!

The .is(':hidden') method — your main tool

The simplest and most common way to check if an element is hidden is to use the .is() method with the :hidden pseudo-selector. jQuery provides it out of the box.

How it works

The :hidden selector in jQuery selects elements that:

\n
• Have the CSS property display: none;
\n
• Are elements of type <input type="hidden">;
\n
• Have width and height equal to zero (e.g., width: 0; height: 0);
\n
• Are descendants of a hidden parent (inherit invisibility).
\n

Here is what a simple check looks like:

// Check if the element with id="myDiv" is hidden\nif ($('#myDiv').is(':hidden')) {\n    console.log('Element is hidden!');\n} else {\n    console.log('Element is visible.');\n}

Checking visibility with .is(':visible')

For the reverse logic, use the :visible selector:

if ($('#myDiv').is(':visible')) {\n    console.log('Element is visible on the page.');\n}

Both approaches work quickly and are intuitive. But there is a nuance: what if the element is hidden using visibility: hidden or opacity: 0? jQuery considers such elements visible, which often comes as a surprise to beginners.

Pitfalls: visibility: hidden and opacity: 0

Many developers mistakenly believe that :hidden responds to any method of hiding an element. This is not the case.

Example with visibility: hidden

The visibility: hidden property makes an element invisible, but it still occupies space on the page. jQuery considers such an element visible because its dimensions are not zero.

<div id="myBox" style="visibility: hidden;">I am invisible but take up space</div>\n\n<script>\nconsole.log( $('#myBox').is(':hidden') );  // false\nconsole.log( $('#myBox').is(':visible') ); // true\n</script>

Example with opacity: 0

The same applies to transparency:

<div id="transparentBox" style="opacity: 0;">Transparent, but visible to jQuery</div>\n\n<script>\nconsole.log( $('#transparentBox').is(':hidden') );  // false\n</script>

If your code uses fadeIn()/fadeOut() or transparency animation, the standard :hidden check will let you down. For such cases, you need to check the specific CSS property.

How to check for visibility: hidden or opacity: 0

When you need to find out if an element is hidden specifically using these properties, use .css():

Checking visibility

var isVisibilityHidden = ($('#myElement').css('visibility') === 'hidden');\nif (isVisibilityHidden) {\n    console.log('Element is hidden via visibi