slideToggle( speed, [callback] ) Method

Description

The slideToggle() method toggles the visibility of all matched elements by adjusting their height and firing an optional callback after completion.

Syntax

Here is the simple syntax to use this method −

selector.slideToggle( speed, [callback] );

Parameters

Here is the description of all the parameters used by this method −

speed − A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
callback − This is optional parameter representing a function to call once the animation is complete.

Example

Following is a simple example a simple showing the usage of this method −

Live Demo

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
   
         $(document).ready(function() {

            $("#toggle").click(function(){
               $(".target").slideToggle( 'slow', function(){ 
                  $(".log").text('Toggle Transition Complete');
               });
            });
				
         });
      </script>
		
      <style>
         p {background-color:#bca; width:200px; border:1px solid green;}
      </style>
   </head>
	
   <body>
      <p>Click on the following button:</p>
      <button id = "toggle"> Toggle </button>

      <div class = "target">
         <img src = "../images/jquery.jpg" alt = "jQuery" />
      </div>
		
      <div class = "log"></div>
   </body>
</html>

This will produce following result −

jquery-effects.htm