Given a HTML document and the task is to check the element is visible or not using jQuery :visible selector. The :visible selector can be used with .toggle() function to toggle the visibility of an element. It will works with the elements visibility: hidden; or opacity: 0;
Syntax:
$(element).is(":visible");
Example 1: This example uses :visible selector to check an element is visible or not using jQuery.
<!DOCTYPE html> < html >
< head >
< title >
How to check an element is
visible or not using jQuery?
</ title >
< script src =
</ script >
</ head >
< body style = "text-align:center;" >
< h1 style = "color:green;" >
GeeksForGeeks
</ h1 >
< h3 >
How to check an element is
visible or not using jQuery ?
</ h3 >
< p style = "display: none;" >
GEEKSFORGEEKS - A computer science
portal for geeks.
</ p >
< input onclick = "change()" type = "button"
value = "Click to Display" id = "myButton1" >
</ input >
< script type = "text/javascript" >
$(document).ready(function() {
$("input").click(function() {
// Display hide paragraph on button click
if (this.value == "Click to Display")
this.value = "Click to Hide";
else this.value = "Click to Display";
$("p").toggle("slow", function() {
// Check paragraph once toggle
// effect is completed
if($("p").is(":visible")) {
alert("Paragraph is visible.");
} else {
alert("Paragraph is hidden.");
}
});
});
});
</ script >
</ body >
</ html >
|
Output:
Example 2: This example uses :visible selector to check an element is visible or not using jQuery.
<!DOCTYPE html> < html >
< head >
< title >
How to check an element is
visible or not using jQuery?
</ title >
< script src =
</ script >
< style >
h1 {
color: green;
}
table, th, td {
border: 1px solid black;
text-align: center;
}
</ style >
</ head >
< body >
< center >
< h1 style = "color:green;" >
GeeksForGeeks
</ h1 >
< h3 >
How to check an element is
visible or not using jQuery?
</ h3 >
< input onclick = "change()" type = "button"
value = "Click to Display" id = "myButton1" >
</ input >
< table style = "width:70% " >
< tr >
< th >Language Index</ th >
< th >Language Name</ th >
</ tr >
< tr >
< td >1</ td >
< td >C</ td >
</ tr >
< tr >
< td >2</ td >
< td >C++</ td >
</ tr >
< tr >
< td >3</ td >
< td >Java</ td >
</ tr >
< tr >
< td >4</ td >
< td >Python</ td >
</ tr >
< tr >
< td >5</ td >
< td >HTML</ td >
</ tr >
</ table >
< h4 ></ h4 >
< script type = "text/javascript" >
$(document).ready(function() {
$("input").click(function() {
// Display hide paragraph on
// button click
if (this.value=="Click to Display")
this.value = "Click to Hide";
else
this.value = "Click to Display";
$("table").toggle("slow", function() {
// Check paragraph once toggle
// effect is completed
if($("table").is(":visible")) {
$("h4").text("Paragraph is visible.");
}
else {
$("h4").text("Paragraph is hidden.");
}
});
});
});
</ script >
< center >
</ body >
</ html >
|
Output:
-
Before Click on the Button:
-
After Click on the “Click to Display” button:
-
After Click on the “Click to Hide” button: