Introduction
In this article, we will take a look at how to check if an element is hidden with JQuery. Here are the most common ways to check the visibility of an element:
console.log($(myElement).is(":hidden"))
console.log($(myElement).is(":visible"))
console.log($(myElement).css("visibility") === "hidden")
console.log($(myElement).css("display") === "none")
console.log($(myElement).css("opacity") <= "0")
"Why are there so many ways to check visibility?"
Multiple factors can play a role in the visibility of an element! We will cover each case and consider when it's wise to use them. Though, first, let's set up our test environment.
Environment Setup
For this tutorial, we will use jQuery Core, version 3.6.0. You can get the latest CDN from jQuery's official website.
Let's start by creating an index.html file with the boilerplate code most pages have, and add a <p> element with a class named first-element to the <body>:
<!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://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<p class="first-element" >This is the first paragraph.</p>
</body>
</html>
Now let’s hide this paragraph, so that we can test its visibility with .is(":hidden")! To hide the first-element we can simply add hidden attribute to it:
<p class="first-element" hidden>This is the first paragraph</p>
Note: Reload the page and confirm that the first-element is no longer visible.
Check if Element is Hidden with .is(":hidden")
To use .is(":hidden") you can either create <script></script> tags and add your JavaScript code within them, or use the Console tool of your browser to execute the code directly. Pick whichever you wish, it will not affect the outcome.
Either way, you can read the output from the Console tab (by pressing F12 or Ctrl + Shift + I for most browsers). Alternatively, you can right-click on the page and select "Inspect" from the menu. In Firefox it's "Inspect element".
.is(":hidden") will return true if the selected element is hidden. If it's not hidden, then it will return false.
Let's use this method on our hidden .first-element:
var myElement = ".first-element";
console.log(myElement + " is hidden?: " + $(myElement).is(":hidden"));
If you check the Console tab of your browser, you should see the following output:
.first-element is hidden?: true
Fairly simple, right? We can use the method is(":visible") to verify our current result.
Check if Element is Hidden with is(":visible")
is(":visible") will test the visibility of an element and will return true if the selected element is visible, or it will return false if it is hidden.
As you've noticed, it is the direct opposite of the .is(":hidden") method. This means that both of them can’t return the same value for the same element. Not at the same time at least.
Let's test it on the first-element and observe the result:
var myElement = ".first-element";
console.log(myElement + " is visible?: " + $(myElement).is(":visible"));
As expected, it will output a false value:
.first-element is visible?: false
Note that you would also get the same results when working with the hidden inputs:
<input type="hidden" class="inp-element" value="3487">
Although the hidden parameter passed into our input element via the type attribute, it still produces the same result.
So far so good. Now let's take our game one step forward and see how to test visibility that has been modified by the CSS.
Check if Element is Hidden with .css("visibility")
Let's add two more items into our DOM:
<p class="second-element">This is the second paragraph.</p>
<p class="third-element">This is the third paragraph.</p>
Refresh/reload your page and confirm that new elements are added.
Now we will change the visibility property of the second-element. To do so, you can create a CSS file and link it to your HTML file or write your CSS code inside the <head> tag of your HTML file, inside the <style></style> tags:
.second-element{
visibility: hidden;
}
Now this part is a bit tricky. Before reloading the page, take a good look at the current position of the third-element. If you refresh the page, you will notice that the second-element is not visible anymore, but it still takes up the same space. It is not visible, yet the position of the third-element implies that it's still there. In fact, if we go ahead and run our previous functions for this element:
var myElement = ".second-element";
console.log(myElement + " is hidden?: " + $(myElement).is(":hidden"));
console.log(myElement + " is visible?: " + $(myElement).is(":visible"));
We would get the result that it is not hidden, but it still is visible:
Check out our hands-on, practical guide to learning Git, with best-practices, industry-accepted standards, and included cheat sheet. Stop Googling Git commands and actually learn it!
.second-element is hidden?: false
.second-element is visible?: true
The reason is that when you set the visibility property to hidden, it becomes invisible but it is still rendered by the browser, so it takes up its initial space. Most browsers consider elements visible if it has height and/or width. In other words, any element with zero dimensions is considered hidden.
Now that we know what we're dealing with, all we have to do is to check if visibility property of the element is set to hidden, not whether the element itself is hidden:
var myElement = ".second-element";
console.log(myElement + " is visibility === hidden?: " + ($(myElement).css("visibility") === "hidden"));
This will return true:
.second-element is visibility === hidden?: true
While we're at it, let's work out what other CSS properties affect the visibility.
Check if Element is Hidden with .css("display")
Another CSS property that is commonly used to hide elements is display. We already have our third-element ready in our DOM. So all we have to do is set its display to none:
.third-element {
display: none;
}
Upon refreshing the page, you can see that it is not visible anymore.
Now, the good thing about display: none; is that we can select it correctly by using our previous is(":hidden") and is(":visible") methods:
var myElement = ".third-element";
console.log(myElement + " is hidden?: " + $(myElement).is(":hidden"));
console.log(myElement + " is visible?: " + $(myElement).is(":visible"));
Since the browser doesn't render the third-element, we get the results as expected:
.third-element is hidden?: true
.third-element is visible?: false
We can also select it with using the .css() selector:
var myElement = ".third-element";
console.log(myElement + " is css.display == none?: " + ($(myElement).css("display") === "none"));
And we would get the following output as a result:
.third-element is css.display == none?: true
Another way to make an element invisible is to set its opacity to zero. In the next section, we will create a new element, change its opacity, and check whether it's visible or not.
Check if Element is Hidden with .css("opacity")
Making an item invisible via opacity behaves similarly to setting the visibility property to hidden. For this reason, we will add two more elements to observe the change better:
<p class="fourth-element">This is the fourth paragraph.</p>
<p class="visible-element">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis corrupti inventore, et beatae accusantium perferendis?</p>
Now let's add some padding to emphasize the space taken by the fourth-element, and also set it's opacity to zero:
.fourth-element {
padding: 30px;
opacity: 0;
}
Refreshing the page, you will notice the absence of the fourth-element. It has dimensions, thus it's rendered, but it is not opaque, so it is not visible.
So naturally, all the following methods:
var myElement = ".fourth-element";
console.log(myElement + " is hidden?: " + $(myElement).is(":hidden"));
console.log(myElement + " is visibility === hidden?: " + ($(myElement).css("visibility") === "hidden"));
console.log(myElement + " is css.display == none?: " + ($(myElement).css("display") === "none"));
Will return false:
.fourth-element is hidden?: false
.fourth-element is visibility === hidden?: false
.fourth-element is css.display == none?: false
The only way to catch this invisible element, is to use the .css("opacity") selector:
var myElement = ".fourth-element";
console.log(myElement + " is opacity lesser than or equal to 0?: " + ($(myElement).css("opacity") <= "0"));
This returns true:
.fourth-element is opacity lesser than or equal to 0?: true
And this concludes our tutorial on how to check if an element is hidden with jQuery!
Conclusion
In this tutorial, we learned how to check the visibility of an element using jQuery selectors. While the .is(":hidden"), is(":visible"), and .css("display") selectors are good choice to select the non-rendered elements, .css("visibility") and .css("opacity") are the best fits for the elements that are rendered but not visible to human eyes.
