How to check if an element is hidden in jQuery?

How to check if an element is hidden in jQuery?

Last Updated : 06 Aug, 2024

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:

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>
        Jquery Hidden element Checking
    </title>
    <style>
        h1 {
            color: green;
        }

        table,
        th,
        td {
            border: 1px solid black;
        }
    </style>
    <script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
    </script>

    <script type="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>
        <button type="button">
            Click!
        </button>
        <br><br>
        <table style="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:

How to check if an element is hidden in jQuery?

A

AkshayGulati

Improve

Article Tags :

Similar Reads

How to check an HTML element is empty using jQuery ?

Given an HTML document and select an element from the HTML document and check that element is empty or not. There are two methods used to solve this problem which are discussed below: Method 1: Using the ":empty" selector: The element to be checked using is() method. The is() method is used to check

How to check element exists or not in jQuery ?

Checking if an element exists in jQuery involves selecting the element and verifying its length. If the selected element's length is greater than 0, the element exists in the DOM; otherwise, it doesn't. This is useful for conditionally manipulating elements. There are two ways to check whether an el

How to Check if an Element is Visible in DOM?

To check if an element is visible in the DOM, the process involves determining its presence and whether it is displayed on the page.Below are the approaches to check if an element is visible in DOM or not: Table of ContentUsing offsetHeight and offsetWidthUsing getComputedStyle() methodApproach 1: U

How to hide elements defined as variables in jQuery ?

In this article, we will learn how to hide elements defined as variables in jQuery. These can be done using two approaches. Approach 1: In this approach, we will first select the element that has to be hidden and then assign it to a variable. We will then call the hide() method on the variable. This

How to show/hide an element using jQuery ?

We are given an element and the task is to to show/hide the element using jQuery. Below are the approaches to show/hide an element using jQuery:Table of ContentUsing css() methodsUsing show methodUsing Toggle methodApproach 1: Using css() methodsIt takes two parameters where the first parameter is t