.slideToggle() Effect in Jquery

Thiyagu

8 years ago

Description:

Jquery slideToggle() method display/hide the matched elements with a sliding motion. Alternatively, we can use slideToggle() method that perform both slide up and down animation based up on the initial display. If initial displays state is in slide down then it will slide up the element or if the selected element is slide up then it will slide down.

Syntax

.slideToggle(

[duration ] [easing ] [callback/complete ] )

Ex :

$("#div").slideToggle("slow", function() 
{ 
// Execute after Animation completed.
});

$("#div").slideToggle("slow", function()

{

// Execute after Animation completed.

});

Duration/speed	It specifies the speed of the fadein. The valuse may be slow, fast and milliseconds. (default value: 400). Duration are given in milliseconds and higher values indicate slower animations, not faster ones.
Easing	It specifies the easing function to be used for transition (default value: swing).
Callback	A function to call once the animation is complete.

Example:

From the below code, the selected (“divFadeBox”) will be slideUp and slideDown based up on their initial display. For example, if the selected element is hidden state then slideToggle will perform the slideUp else it will perform the slideDown animation .

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script type="text/javascript">

 $(document).ready(function () {
 $("#divflipBox").click(function () {
 $("#divpanelBox").slideToggle("slow");
 });
 });

 </script>
 <style type="text/css">
 #divflipBox, #divpanelBox {
 background-color: #a0ce4e;
 border: solid 1px #c3c3c3;
 width: 25%;
 }

 #divpanelBox {
 padding: 30px;
 }
 </style>
</head>
<body>
 <div id="divflipBox">
 Click to slideToggle
 </div>
 <div id="divpanelBox">
 Hello Welcome to dotnet-helpers.com slideToggle() example
 Learn MVC, ASP , JQuery with best examples. Thanks for visiting.
 </div>
</body>
</html>

<html>

<head>

$(document).ready(function () {

$("#divflipBox").click(function () {

$("#divpanelBox").slideToggle("slow");

});

</script>

#divflipBox, #divpanelBox {

background-color: #a0ce4e;

border: solid 1px #c3c3c3;

width: 25%;

}

#divpanelBox {

padding: 30px;

}

</style>

</head>

<body>

Click to slideToggle

</div>

Hello Welcome to dotnet-helpers.com slideToggle() example

Learn MVC, ASP , JQuery with best examples. Thanks for visiting.

</div>

</body>

</html>

Description:

Syntax

Example:

Output:

Other Popular Articles