How to check if an element is hidden using jQuery

1. Introduction

In this short article, we are going to show a way to check if an element is hidden using the jQuery library.

2. Solution

If you want to check if an element is visible on the website you can use jQuery :visible selector. Elements are considered visible if they consume some space in the DOM so they have width or height greater then zero.

const element1 = $('#first');
const element2 = $('#second');

console.log('First DIV is Visible = ', $(element1).is(':visible'));
console.log('First DIV is Hidden = ', $(element1).is(':hidden'));

console.log('Second DIV is Visible = ', $(element2).is(':visible'));
console.log('Second DIV is Hidden = ', $(element2).is(':hidden'));

<div id="first" style="display:none;"></div>
<div id="second">Second DIV</div>

Note that this solution will not work for elements with visibility: hidden attribute in styles. That case will needs additional condition:

if (!$(element).css("visibility") == "hidden") {
    // do something
}

3. Conclusion

In this article, we presented a way to check if an element is visible on the website using the jQuery library. We used jQuery is() method that traverses along the DOM elements to find a match, which satisfies the passed parameter. It will return true if there is a match otherwise returns false.