❮❮ PREV NEXT ❯❯

EFFECTS - slideToggle()

The toggle() Effect is a combination of slideUp and slideDown effect. i.e. Hides the visible element using slide up effect and if the element is hidden, makes it visible using slide down effect.

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>
    	
    	<button> Show/Hide </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').click( function() { 
            	$('p').slideToggle();
            });
            
      	</script>      
  	</body>
</html>

Output :

So, in the above example, we have a <p> element,

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

And a <button> element,

<button> Show/Hide </button>

And on buton click, the JQuery action gets triggered,

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

And the slideToggle() effect gets triggered. So if the <p> element is hidden, it shows it and it the <p> element is visible, it hides it.

Similarly, you can use the speed and callback function with toggle() effect.

❮❮ PREV NEXT ❯❯