EFFECTS - slideDown()

The slideDown() Effect is used to make the hidden element visible using a slide down effect.

Example :

<html>
  	<head>
    	<title> My First Programme </title>
    	
    	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	
    	<button class = 'hideClass'> Hide </button>
    	<button class = 'showClass'> Show </button> 
    	
    	<p> 
        	In a huge pond,  <br/>
            there lived many fish. <br/>
			They were arrogant and <br/>
            never listened to anyone.<br/>            
        </p>
	  
      	<script>
      
			$('button.hideClass').click( function() { 
            	$('p').slideUp();
            });
            
            $('button.showClass').click( function() { 
            	$('p').slideDown();
            });
            
      	</script>      
  	</body>
</html>

Output :

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

<p>
	In a huge pond,  <br/>
	there lived many fish. <br/>
	They were arrogant and <br/>
	never listened to anyone.<br/>
</p>

And two <button> elements,

The first button is used to hide the element with slide up effect.

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

And the second button is used to show the hidden element with slide down effect.

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

We have already seen, how the slide up effect works.

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

So, on Hide button click, the  element gets hidden with slide up effect.

<p> This is a sentence </p>

Now, to unhide the above  element with slide down effect, we have the below JQuery code,

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

And JQuery locates the  element,

$('p').slideDown();

And slides down the  element using slideDown() effect.

slideDown() 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://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	
    	<button class = 'hideClass'> Hide </button>
    	<button class = 'showClass'> Show </button> 
    	
    	<p> 
        	In a huge pond,  <br/>
            there lived many fish. <br/>
			They were arrogant and <br/>
            never listened to anyone.<br/>            
        </p>
	  
      	<script>
      
			$('button.hideClass').click( function() { 
            	$('p').slideUp();
            });
            
            $('button.showClass').click( function() { 
            	$('p').slideDown(1000, function() {
            		alert("The element is visible")
            	});
            });
            
      	</script>      
  	</body>
</html>

Output :

So, in the above JQuery statement,

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

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

Note : The values passed to the 'slideDown()' 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.

❮❮ PREV NEXT ❯❯