How do I check if an element is hidden using jQuery?

In this tutorial, we'll check whether an HTML element is hidden or not using jQuery methods.
Submitted by Pratishtha Saxena, on August 12, 2022

There can be many reasons for an element to be hidden. It can have a CSS display value as none, or it can be a form element with type = 'hidden', or the width and height can be set to 0, etc.

To check whether the element is hidden, the following selectors can be used.

Using :hidden selector
Using :visible selector

1) Check if an element is hidden using :hidden selector

It is a jQuery inbuilt selector. It is used to check directly whether the element specified is hidden or not. It can be used with is() method to return true or false.

Syntax:

$(selector).is(":hidden")

If the selected element is hidden then it will return true otherwise false.

Let's see a simple and basic example of this.

Example to check if an element is hidden using :hidden selector

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  <body>
    <h2>Let's check if element is hidden or not.</h2>
    <div id="div1">
      <div id="div2" style="display:none">Hidden Content</div>
    </div>
  </body>
</html>

jQuery:

if ($("#div2").is(":hidden")) {
    $("#div2").css("display", "block").css("color", "red");
}

Output:

The div that is hidden i.e., display:none, is now visible as its property has been changed to block.

Example 1: check if an element is hidden

2) Check if an element is hidden using :visible selector

Similar to the :hidden selector, :visible selector is also used to find out whether the selected element is visible on the screen or not.

Here the difference is just that if the element is visible it returns true and if that element is hidden it will return false.

Syntax:

$(selector).is(":visible");

Let's see an example of this.

Example to check if an element is hidden using :visible selector

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  <body>
    <h2>Let's check if element is hidden or not.</h2>
    <div id="div1">
      <div id="div2" style="display:none">Hidden Content</div>
    </div>
  </body>
</html>

jQuery:

$(document).ready(function() {
    if ($("#div2").is(":visible")) {
        console.log("Visible");
    } else {
        console.log("Not Visible");
    }
});

Output:

Example 2: Check if an element is hidden

Example 3: Check if an element is hidden