is(:visible) in jQuery
The :visible selector is used to check if an element in the HTML document is visible or not, and is() is a built-in method from jQuery. This tutorial demonstrates how to use the .is(":visible") selector in jQuery.
Use the .is(":visible") Selector in jQuery
Sometimes, it is required to check if an element in the page is visible or not; for this purpose, a built-in selector .is(":visible") from jquery is used. The syntax contains a method is() and a selector :visible.
The method and the selector together will check if an element is visible on the page or not. The syntax for this method is:
$(element).is(":visible");
Where :visible is a CSS selector that tells the user to select the elements visible on the page. The return value for this method is whether an element is visible or not.
The is() method is from jQuery to check the specific set of elements against the selector passed to it, and it will not create a new object that will check the same object without any modifications.
Let’s try a simple example that will alert us if the given element is visible or not:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery is visible method </title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js""> </script>
<style>
#delftstack {
display: block;
}
</style>
<script>
$(document).ready(function() {
// Check whether the delftstack h1 is visible
if($("h1").is(":visible")) {
alert("The h1 element with delftstack is visible.");
}
else {
alert("The h1 element with delftstack is not visible.");
}
});
</script>
</head>
<body>
<h1 id = "delftstack">Hello, This is delftstack.com</h1>
</body>
</html>
The display for the h1 is set to block, so the element is visible in the document. See the output:
Similarly, if the display is set to none, the element will not be visible in the document. See example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery is visible method </title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js""> </script>
<style>
#delftstack {
display: none;
}
</style>
<script>
$(document).ready(function() {
// Check whether the delftstack h1 is visible
if($("h1").is(":visible")) {
alert("The h1 element with delftstack is visible.");
}
else {
alert("The h1 element with delftstack is not visible.");
}
});
</script>
</head>
<body>
<h1 id = "delftstack">Hello, This is delftstack.com</h1>
</body>
</html>
The output for this code is:
We can also use the .is(":visible") method for the purpose of hiding and showing an element. Let’s try an example:
<!DOCTYPE html>
<html>
<head>
<title>
is visible jQuery
</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body style="text-align:center;">
<h1 style = "color:blue;" > DELFTSTACK </h1>
<h3>
Is Visible JQuery
</h3>
<p style="display: none;">
Delftstack.com - The Best Tutorial Site
</p>
<input onclick="change()" type="button" value="Display" id="DemoButton"> </input>
<script type="text/javascript">
$(document).ready(function() {
$("#DemoButton").click(function() {
if (this.value == "Display")
this.value = "Hide";
else this.value = "Display";
$("p").toggle("slow", function() {
if($("p").is(":visible")) {
alert("The P element is visible.");
}
else {
alert("The p element is hidden.");
}
});
});
});
</script>
</body>
</html>
The code above will display or hide the paragraph element on click using the .is(":visible") method to check. See output:
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook