How to check if an element is hidden using jQuery
Topic: JavaScript / jQueryPrev|Next
Answer: Use the jQuery :hidden Selector
The jQuery :hidden selector can be used to test whether an element is hidden or not on a page.
You can also use this selector to test the elements whose width and height are set to 0 as well as the form elements with the attribute type="hidden". Let's see how it works:
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Test If an Element is Hidden</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
// show hide paragraph on button click
$("p").toggle("slow", function(){
// check paragraph once toggle effect is completed
if($("p").is(":hidden")){
alert("The paragraph is hidden.");
} else{
alert("The paragraph is visible.");
}
});
});
});
</script>
</head>
<body>
<button type="button">Toggle Paragraph Display</button>
<p>Lorem ipsum dolor sit amet adipi elit...</p>
</body>
</html>Related FAQ
Here are some more FAQ related to this topic:
- How to check an element is visible or not using jQuery
- How to select all visible or hidden elements in a page using jQuery
- Show and hide DIV elements based on the selection of radio button in jQuery
- Show and hide DIV elements based on click of checkboxes in jQuery
- Show and hide DIV elements based on dropdown selection in jQuery
