How to select elements with no visible children using jQuery ?
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">w3wiki</h1> <p>It is a computer science portal for Beginner.</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>w3wiki</h1> <p style="display: none"> It is a computer science portal for Beginner. </p> <p style="display: none"> You can whatever you want to learn in the computer science field. </p> </body></html> |
Output :
Contact Us