How to select elements with no visible children using jQuery ?

How to select elements with no visible children using jQuery ?

Last Updated : 26 Jul, 2024

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.

jQuery :hidden Selector: The task of this selector is to select the element which has hidden property.

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=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </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=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </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 :

How to select elements with no visible children using jQuery ?

B

bhaluram18

Improve

Article Tags :

Similar Reads

How to Select a Range of Elements using jQuery ?

Given an HTML document with a range of similar elements and the task is to select a range of those elements with the help of JavaScript. There are two approaches that are discussed below with an example. Approach 1: First, select all elements of class = 'child' by jQuery selector then use slice() me

How to Select All Elements without a Given Class using jQuery?

In jQuery, selecting elements that do not have a specific class can be useful when you want to manipulate or style all elements except those matching a certain condition. This approach allows for more precise control over the elements in various dynamic situations.Here we have some common approaches

How to select an element by name with jQuery ?

Selecting an element by name with jQuery allows you to target HTML elements using their `name` attribute. This method is commonly used in form handling, where input fields, checkboxes, or radio buttons share the same name, enabling you to easily manipulate or retrieve their values.Table of ContentUs

How to filter the children of any element using jQuery ?

In this article we will learn how to filter the children of any element in JQuery. JQuery is a fast and lightweight JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. It is widely famous for its motto o

How to remove contents of elements using jQuery ?

In this article, we will discuss how to remove the contents of the elements using jQuery. To remove the contents of elements, we will use the empty() method and the remove() method. The jQuery empty() method is used to remove all child nodes and their content for the selected elements. This method d