jQuery Api SlideToggle Effect Example

jQuery SlideToggle Animation Method – how to use this method with html elements or webpages. We are going to show you with simple example how to use this effects. Here you will learn how to show hide HTML elements using slideToggle method.

jQuery SlideToggle Animation Effect

The SlideToggle() animation method is used to slideToggle() (hide/show) the selected Html elements. The jQuery slideToggle() method show or hide the selected elements by decreasing or increasing their heigh.

The slideToggle() method toggles between slideUp() and slideDown() for the selected html elements.

Syntax

 $(selector).slideToggle();  
$(selector).slideToggle(speed, callback);
$(selector).slideToggle(speed, easing, callback);

Parameters of slideToggle method

  • speed :- The argument ‘speed‘ determines the duration of this effect.
  • easing :- It specifies the easing function to be used for transition.
  • callback :- Ihis is an optional parameter. you can specify what to do after the slideToggle() method is called.

jQuery slideToggle() example

In the below example you can see that slideToggle() method effect.

<!DOCTYPE html>  
<html>  
<title>jQuery Slide Toggle</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   
<script>   
$(document).ready(function(){  
    $("button").click(function(){  
        $("#slide_div").slideToggle("slow");  
    });  
});  
</script>  
 <style>   
#slide_div{  
    padding: 5px;  
    text-align: center;  
    background-color: #00FFFF;  
    border: solid 1px #c3c3c3;  
}  
#slide_div {  
    padding: 50px;  
    display:none;  
}  
</style>  
</head>  
<body>  
<button id="btn-up">Click Me to slide Toggle</button> 
<div id="slide_div"><b>Hello</b> <br><br>Thank for trying this</div> 
</body>  
</html>  

 

slideToggle and callback example

<!DOCTYPE html>  
<html>  
<title>jQuery Slide Toggle</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   
<script>   
$(document).ready(function(){  
    $("button").click(function(){  
        $("#slide_div").slideToggle("slow", function(){
         alert("The slideToggle effect is completed.");
        });  
    });  
});  
</script>  
 <style>   
#slide_div{  
    padding: 5px;  
    text-align: center;  
    background-color: #00FFFF;  
    border: solid 1px #c3c3c3;  
}  
#slide_div {  
    padding: 50px;  
    display:none;  
}  
</style>  
</head>  
<body>  
<button id="btn-up">Click Me to slide Toggle</button> 
<div id="slide_div"><b>Hello</b> <br><br>Thank for trying this</div> 
</body>  
</html>  

 

In this above example of slideToggle() method with callback, you can see that slideToggle() effect with callback on html elements.

Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *