jQuery SlideToggle Animation Method; In this tutorial, you will learn how to use this method with html elements or webpages.
This tutorial is going to show you what is jQuery slideToggle animation effect is with simple examples of how to use this effects. And you will learn how to show hide HTML elements using slideToggle method.
jQuery SlideToggle Animation Effect with Example
slideToggle() is a method in the jQuery library that is used to create a sliding animation for elements. It’s often employed to hide or show elements with a smooth sliding motion. This method is particularly useful when you want to toggle the visibility of an element while adding a visual animation effect.
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.
