AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL

jQuery SlideToggle()


<< Previous Page
jQuery tutorial
Next Page >>
jQuery tutorial

jQuery Tutorial » jQuery SlideToggle()

What is jQuery slideToggle

The jQuery SlideToggle() method in jQuery toglle between the two slideUp() and slideDown()  methods.

If items are slideDown, then SlideToggle() will slideUp.

Syntax:

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

The optional: speed parameter specifies the duration of the effect and may have the following values as "slow", "fast" or milliseconds.

Easing parameter is an optional used to specify the speed of item to different points of animation.

The next: callback parameter which can also be optional and is a function that is called after completion of slideToggle() effect.

 

jQuery simple slideToggle() method effect.

A simple example of jQuery slideToggle() method.  We toglle between the two slideUp() and slideDown().

<!DOCTYPE html>
<html>
<head>
<title>Sliding toggle effect in jQuery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("#btn").click(function() {
$(".box").slideToggle()
});
});
</script>
<style>
.box{
background-color: #FFC; margin-top: 18px;
padding: 10px 20px; text-align: center; font-size: 16px; border: solid 1px green; height: 200px; width: 300px;
}
.message {
font-weight: bold; font-size: 20px; color: blue; margin-left: 10px;
}
</style>
</head>
<body>
<button id="btn" style="background: #09F; padding:10px 20px; cursor: pointer; font-size: 18px;">
Click here to slide toggle the below box
</button>
<div class="box">
<br/><b>jQuery</b> <br /><br />Sliding Effect<br /><br />slideToggle()
</div>
<div class="message"></div>
</body>
</html>

 

Related subjects:
jQuery slideDown () jQuery slideUp () Effects hide / show jQuery selectors

 

Tags: jQuery SlideToggle(): left, direction, display flex, not working, not smooth, callback, speed, vanilla js, example, animation, start hidden, default closed, function, table row,
What is jQuery slideToggle?
What is slideToggle?
What is slide up in jQuery?
How do you animate a slide in jQuery?

 

slideToggle() With Duration Parameter - Example

Example demonstration slideToggle() effects with speed by using string parameter "slow"

Example demonstration the slideToggle() effects with speed 2000 milliseconds.

<!DOCTYPE html>
<html>
<head>
<title>Sliding toggle effect in jQuery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("#btn").click(function() {
$(".box").slideToggle("slow", function() {
$(".message").text(" Slide Toggle Transition has Completed");
});
});
});
</script>
<style>
.box{
background-color: #FFC; margin-top: 18px;
padding: 10px 20px; text-align: center; font-size: 16px; border: solid 1px green; height: 200px; width: 300px;
}
.message {
font-weight: bold; font-size: 20px; color: blue; margin-left: 10px;
}
</style>
</head>
<body>
<button id="btn" style="background: #09F; padding:10px 20px; cursor: pointer; font-size: 18px;">
Click here to slide toggle the below box
</button>
<div class="box">
<br/><b>jQuery</b> <br /><br />Sliding Effect<br /><br />slideToggle()
</div>
<div class="message"></div>
</body>
</html>

Various ways with duration parameter for using slideToggle() are discussed in the above example.

 

slideToggle effect with alert message - callback function

slideUp(), slideToggle and slideDown() effect with alert message - Example:

<!DOCTYPE html>
<html>
<head>
<title>Sliding effect in jQuery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("#up").click(function() {
$("#box").slideUp("500", function() {
$(".message").text(" Slide Up Transition has Completed");
});
});
$("#down").click(function() {
$("#box").slideDown("fast", function() {
$(".message").text(" Slide Down Transition has Completed");
});
});
$("#toggle").click(function() {
$("#box").slideToggle("slow", function() {
$(".message").text(" Slide Toggle Transition has Completed");
});
});
});
</script>
<style>
#box,#up {
padding: 10px;
text-align: center;
width: 500px;
text-align: center;
background-color: #FF9;
border: solid 1px lightgray;
}
#down {
padding: 10px;
text-align: center;
width: 500px;
text-align: center;
background-color: #CF9;
border: solid 1px lightgray;
}
#toggle {
padding: 10px;
text-align: center;
width: 500px;
text-align: center;
background-color: #0FF;
border: solid 1px lightgray;
}
#box {
display: none;
height: 300px;
padding-top: 30px;
margin-top: 20px;
}
.message {
font-weight: bold;
font-size: medium;
margin-top: 30px;
color: maroon;
margin-left: 10px;
}
</style>
</head>
<body>
<span id="down">Click here to slideDown()</span>
<span id="up">Click here to slideUp()</span>
<span id="toggle">Click here to slideToggle() </span>
<div id="box">
jQuery Sliding Effect (animation)<br /><br />
SlideDown<br /><br />
SlideUp<br /><br />
SlideToggle
</div>
<div class="message"></div>
</body>
</html>

 



jQuery SlideToggle(): left, direction, display flex, not working, not smooth, callback, speed, vanilla js, example, animation, start hidden, default closed, function, table row,
What is jQuery slideToggle?
What is slideToggle?
What is slide up in jQuery?
How do you animate a slide in jQuery?

JQuery SlideToggle() - jquery

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


0
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


jQuery replace...
jQuery replaceClass...
jQuery click ()...
jQuery switchClass()...
jQuery draggable()...
jQuery HTML...
jQuery scroll smooth...
jQuery scroll()...
jQuery stop()...
jQuery animate()...
jQuery SlideToggle()...
jQuery slideDown()...
jQuery slideUp()...
jQuery fadeToggle...
jQuery fadeOut()...
jQuery fadeIn()...
jQuery Effects - hide () and show ()...
jQuery Events...
jQuery Attributes...
jQuery Selectors...