EFFECTS - show()

The show() Effect is used to make the hidden element visible.

Example :

<html>
  	<head>
    	<title> My First Programme </title>
    	
    	<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	
    	<p> This is a sentence </p>
    	<button class = 'hideClass'> Hide </button>
    	<button class = 'showClass'> Show </button> 
	  
      	<script>
      
			$('button.hideClass').click( function() { 
            	$('p').hide();
            });
            
            $('button.showClass').click( function() { 
            	$('p').show();
            });
            
      	</script>      
  	</body>
</html>

Output :

So, in the above example, we have a  element,

<p> This is a sentence </p>

And two <button> elements,

The first button is used to hide the element.

<button class = 'hideClass'> Hide </button>

And the second button is used to show the hidden element.

<button class = 'showClass'> Show </button>

We have already seen, how the hide effect works.

Now, let us see, how the show effect can be used to show the hidden element.

So, on Hide button click, the  element gets hidden.

<p> This is a sentence </p>

Now, to unhide the above  element, we have the below JQuery code,

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

And JQuery locates the  element,

$('p').show();

And unhides the  element using show() effect.

show() Effect with speed and 'callback function'

Now, let's say, you want to display a message, stating the element is visible. You can achieve it using a callback function.

Example :

<html>
  	<head>
    	<title> My First Programme </title>
    	
    	<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	
    	<p> This is a sentence </p>
    	<button class = 'hideClass'> Hide </button>
    	<button class = 'showClass'> Show </button> 
	  
      	<script>
      
			$('button.hideClass').click( function() { 
            	$('p').hide();
            });
            
            $('button.showClass').click( function() { 
            	$('p').show(1000, function() {
            		alert("The element is visible")
            	});
            });
            
      	</script>      
  	</body>
</html>

Output :

So, in the above JQuery statement,

$('button.showClass').click( function() {
	$('p').show(1000, function() {
		alert("The element is visible")
	});
});

Along with the show() effect, we have used the show speed as the first parameter and callback function as the second parameter.

Note : The values passed to the 'show()' effect are called parameters.

Now, if you see the callback function,

function() {
	alert("The element is visible")
}

It displays an alert,

alert("The element is visible")

That the element is visible.

In simple words, on button click the  element is hidden in 1000 milliseconds and once the  element is completely visible, we get the alert, The element is visible.

❮❮ PREV NEXT ❯❯