The hidden selector in JQuery selects all the hidden elements in the document. When testing an element with hidden selector, it should be considered that an absolute positioned element may be recognized as hidden although their children elements are visible. The hidden elements are elements that are considered hidden for some reasons such as their height and width are set to 0, it only stores the current value of the display css property of the element then set it to none, the form elements with type=”hidden”, the parent element is hidden, so it hides child elements on the page. Lets look at an simple example for JQuery hidden selector.
JQuery Hidden Selector Syntax
$(“:hidden”)
JQuery Hidden Selector Example
<!doctype html> <head> <title>JQuery Hidden Selector</title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> </head> <h2>JQuery Hidden Selector Example</h2> <style> .test1 { color:red; border:1px dashed green; } .test2 { color:blue; border:1px dashed green; } </style> <script> $(document).ready(function(){ $("ul>li:hidden").show(3000); }); </script> <body> <ul> <li class="test1">My value 1</li> <li class="test2" style="display: none;">My value 2</li> <li class="test1">My value 3</li> </ul> </body> </html>
- As shown in the above program, we have used the code inside $(document).ready which is an event which fires up when document is ready. It will run once the page document object model is ready for JavaScript code to execute.
- $(“ul>li:hidden”).show(3000); line defines hidden selector which selects all the hidden elements. It displays the hidden element from the list after 3000 milliseconds. The hidden selector is a parent element which hides child elements on the web page. To display hidden element, we are using show() method with the hidden selector.
- When we run the above script, we will get list of elements which are defined under the body tag. The second value My value 2 is a hidden element, which will get display after 3000milliseconds. It is considered as hidden element because; we have set CSS display value to none. The hidden element will get display with dashed border with green color and text with blue color.
JQuery Hidden Selector Demo
When you run the above example, you would get the following output: