SELECTORS - :hidden Selector

The ':hidden Selector' is used to select the elements, which is hidden.

i.e. There is a CSS property called 'display:none;'. If that is set the element would not be shown and is said to be hidden.

Let us simplify with the below example.

Example :

<html>
  	<head>
    	<title> My First Programme </title>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	
    	<div class = "newClass">
    		<p class = "para1"> First Paragraph </p>
    		<p class = "para2"> Second Paragraph </p>
    		<p style = "display:none;" class = "para3"> Third Paragraph </p>
    	</div>	
    	
    	<button> Click me </button>

      	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
	  
      	<script>
      
			$('button').click( function() { 
            	$('p:hidden').show()
            });
            
      	</script>      
  	</body>
</html>

Output :

So, if you see the above code. We can see that there are three  elements,

<div class = "newClass">
	<p class = "para1"> First Paragraph </p>
	<p class = "para2"> Second Paragraph </p>
	<p style = "display:none;" class = "para3"> Third Paragraph </p>
</div>

And the third  element is hidden,

<p style = "display:none;" class = "para3"> Third Paragraph </p>

And on button click, the contents of third  element is shown or becomes visible.

And this happened with the '$('p:hidden').show()' element selector.

$('button').click( function() {
	$('p:hidden').show()
});

The moment the button is clicked, JQuery statement gets triggered.

$('p:hidden').show()

So it is a two step process :

The JQuery code locates the hidden element of , with the selector 'p:hidden',
```
 Third Paragraph 
```

Then it uses the 'show()' function,

$('p:hidden').show()

And it shows the hidden  element.

<p style = "display:none;" class = "para3"> Third Paragraph </p>

❮❮ PREV NEXT ❯❯

SELECTORS - :hidden Selector

Example :

Output :

The JQuery code locates the hidden element of <p>, with the selector 'p:hidden',

Then it uses the 'show()' function,