How to check if an element is hidden using jQuery To check if an element is hidden or not, jQuery :hidden selector can be used. .toggle() function is used to toggle the visibility of an element.
Syntax:
$(element).is(":hidden");
Example:
<!DOCTYPE html><htmllang="en"> <head> <metacharset="utf-8"> <title> Jquery Hidden element Checking </title> <style> h1 { color: green; } table, th, td { border: 1px solid black; } </style> <scriptsrc="https://code.jquery.com/jquery-1.12.4.min.js"> </script> <scripttype="text/javascript"> $(document).ready(function() { $("button").click(function() { $("table").toggle("slow", function() { if ($("table").is(":hidden")) { alert(" Hidden Element."); } else { alert("Element Visible."); } }); }); }); </script></head> <body> <center> <h1>Geeks for Geeks</h1> <buttontype="button"> Click! </button> <tablestyle="width:60%"> <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> </center></body> </html> |
Output:
Before Clicking:
Source: https://www.geeksforgeeks.org/
See More: Find the Minimum length Unsorted Subarray, sorting
Since the question refers to a single element, this code might be more suitable:
// Checks CSS content for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");
// The same works with hidden
$(element).is(":hidden");
It is the same as twernt’s suggestion, but applied to a single element; and it matches the algorithm recommended in the jQuery FAQ.
We use jQuery’s is() to check the selected element with another element, selector or any jQuery object. This method traverses along the DOM elements to find a match, which satisfies the passed parameter. It will return true if there is a match, otherwise return false.