jQuery SlideToggle()
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,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().
<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.
<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:
<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
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.