How to check an element is visible or not using jQuery?
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 = "https://code.jquery.com/jquery-1.12.4.min.js" > </ script > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > w3wiki </ h1 > < h3 > How to check an element is visible or not using jQuery ? </ h3 > < p style = "display: none;" > w3wiki - A computer science portal for Beginner. </ 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 = "https://code.jquery.com/jquery-1.12.4.min.js" > </ script > < style > h1 { color: green; } table, th, td { border: 1px solid black; text-align: center; } </ style > </ head > < body > < center > < h1 style = "color:green;" > w3wiki </ 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: