Skip to content
Related Articles

Related Articles

Improve Article

How to select elements with no visible children using jQuery ?

  • Last Updated : 26 May, 2021
Geek Week

In this article we are going to learn how to select elements whose property is not visible or hidden. It simply means that the display property of that particular element is hidden, and we need to show whatever present in that element using the Jquery.

We can easily do this by using the Jquery:hidden selector. First, let’s see how you will know that the element is hidden, these elements are set to display: none; form element with  type=”hidden”, Width and height set to 0 or A hidden parent element and this parent will also hide their children.

Syntax – 
 

$(":hidden")
  • jQuery show() Method: It is used to show the hidden element selected by selectors.

Syntax:

$(selector).show(speed,easing,callback) 
// All parameters are optional.

Example 1 :



HTML




<!DOCTYPE html>
<html>
  <head>
    <script src=
    </script>
    <script>
      $(document).ready(function () {
        $("h1:hidden").show(5500);
      });
    </script>
  </head>
  <body>
    <h1 style="display: none">GeeksForGeeks</h1>
 
     
<p>It is a computer science portal for geeks.</p>
 
 
     
<p>
      You can whatever you want to learn in
      the computer science field.
    </p>
 
  </body>
</html>

Output :

Example 2: We have heading tag with display:none property and rest of the tags are visible. When you run the code first it will show you the visible content and then the hidden tags with the help of :hidden selector and .show() method.

HTML




<!DOCTYPE html>
<html>
  <head>
    <script src=
    </script>
    <script>
      $(document).ready(function () {
        $("p:hidden").show(5500);
      });
    </script>
  </head>
  <body>
    <h1>GeeksForGeeks</h1>
    <p style="display: none">
      It is a computer science portal for geeks.
    </p>
 
 
    <p style="display: none">
      You can whatever you want to learn in
      the computer science field.
    </p>
 
  </body>
</html>

Output :




My Personal Notes arrow_drop_up
Recommended Articles
Page :