Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Selected Reading
How do I check if an element is hidden in jQuery?
Using jQuery, you can detect if a specific element in the page is hidden or visible with :visible and :hidden selectors. jQuery provides several methods to check element visibility, with is(':visible') and is(':hidden') being the most commonly used approaches.
Methods to Check Element Visibility
There are two primary selectors you can use ?
- :visible ? Selects elements that are visible (display is not 'none', visibility is not 'hidden', and opacity is not 0)
- :hidden ? Selects elements that are hidden
Example
You can try to run the following code to learn how to check if an element is hidden in jQuery ?
<!DOCTYPE html>
<html>
<head>
<title>jQuery Element Visibility Check</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#checkVisibility").click(function(){
var isVisible = $('#myElement').is(':visible');
var isHidden = $('#myElement').is(':hidden');
if(isVisible) {
alert("Element is visible");
} else {
alert("Element is hidden");
}
});
$("#toggleElement").click(function(){
$('#myElement').toggle();
});
});
</script>
</head>
<body>
<input type="text" id="myElement" value="Test Element" style="display:block;"/>
<button id="checkVisibility">Check Visibility</button>
<button id="toggleElement">Toggle Element</button>
</body>
</html>
Alternative Methods
You can also use these jQuery methods to check visibility ?
// Method 1: Using is(':visible')
if ($('#element').is(':visible')) {
console.log('Element is visible');
}
// Method 2: Using is(':hidden')
if ($('#element').is(':hidden')) {
console.log('Element is hidden');
}
// Method 3: Checking CSS display property
if ($('#element').css('display') === 'none') {
console.log('Element has display: none');
}
Conclusion
jQuery's :visible and :hidden selectors provide an easy way to check element visibility. The is(':visible') method returns true if the element is visible, while is(':hidden') returns true if the element is hidden.
Updated on: 2026-03-13T17:46:31+05:30
270 Views
Advertisements