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.

#javascript