Updated March 23, 2023
Introduction to jQuery Slidetoggle()
This jQuery article talks about one of the sliding effects in jQuery, which helps in creating amazing visual effects in our web pages. These animation effects help in building interactive User Interfaces that give users an enriching web experience. In this topic, we are going to learn about jQuery Slidetoggle().
jQuery slideToggle() method is used to hide or display the selected DOM elements with a sliding effect. In other words, slideToggle() method toggles between slideUp() and slideDown() methods.
- If the DOM element is hidden, slideDown() method is run to slide it down to display it.
- If the DOM element is visible, the slideUp() method is run to slide it up to hide
Syntax
$(selector).slideToggle(speed, easing, callback)Where,
1. Selector specifies the selected DOM/HTML elements.
2. Speed is an optional parameter. It specifies the speed of the sliding effect. Its possible values are:
- slow
- fast
- milliseconds
3. Easing is also an optional parameter. It is represented by a string that specifies the speed of elements at different points of animation. Its possible values are:
- swing (default value)
- linear
4. Callback again is an optional parameter. It specifies the function to be executed once the slideToggle() effect is complete.
Implementation of jQuery slideToggle() method
Now that we have a brief overview of what the slideToggle() method is and what is its syntax let us go through some examples by putting this method in use.
Example #1
Here is a very simple working example to understand how the slideToggle() method works.
Code:
<!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() {
$("#btn").click(function() {
$(".d").slideToggle("slow", function() {
$(".message").text(" Slide Toggle Transition has Completed");
});
});
});
</script>
<style>
.d {
background-color: lightpink; margin-top: 20px;
padding: 10px; text-align: center; font-size: 18px; border: solid 1px; height: 200px; width: 300px;
}
.message {
font-weight: bold; font-size: medium; color: maroon; margin-left: 10px;
}
</style>
</head>
<body>
<button id="btn"
style="background:lightseagreen;cursor: pointer;font-size: 18px;">
Click here to slide toggle the below div
</button>
<div class="d">
<br/><b>jQuery</b> <br /><br />Sliding Effect<br /><br />slideToggle()
</div>
<div class="message"></div>
</body>
</html>Output
- The below screen displays once the page is first loaded in the browser.
- Till this time, no activity has been performed.
- Once the button is clicked, the slideToggle() method act on the selected div, which is visible initially and slides it up to hide it, as shown below.
- At this point in time, the div is hidden.
- When the button is clicked again, the slideToggle() method now again acts on the selected hidden div and slides it down to make it visible.
- Now when we look into the code, we see that the slideToggle() method here takes two parameters,
the speed with value “slow” and a callback function.
- Also, to notice, callback function gets triggered only when the sliding effect has
Example #2
Here is another example illustrating the sliding effect using the jQuery slideToggle() method.
Code:
<!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() {
$("#head").click(function() {
$("#content").slideToggle("slow");
});
});
</script>
<style> #content, #head {
padding: 10px; margin: auto;
text-align: center; width: 500px;
text-align: center;
background-color: lightseagreen; border: solid 1px lightgray;
}
#content { display: none; height: 300px;
}
</style>
</head>
<body>
<div id="head">Click here to slide toggle the below panel</div>
<div id="content">
jQuery Sliding Effect<br /><br /> Slide Toggle
</div>
</body>
</html>Output
- The below screen displays when the page is initially loaded in the browser.
- No activity has been performed as of now.
- Once the above div is clicked, the below screen comes.
- Here, the slideToggle() method acts on the hidden div with id = “content” and slides it down to make it visible.
- To hide the div, click again on the top.
- Here, the slideToggle() method acts on the visible div with id= “content” and slides it up to make it hidden.
- In this example, no callback has been used.
Example #3
Let us look at an example to understand the basic difference between slideUp(), slideDown() and slideToggle() methods.
Code:
<!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() {
$("#content").slideUp("400", function() {
$(".message").text(" Slide Up Transition has Completed");
});
});
$("#down").click(function() {
$("#content").slideDown("fast", function() {
$(".message").text(" Slide Down Transition has Completed");
});
});
$("#toggle").click(function() {
$("#content").slideToggle("slow", function() {
$(".message").text(" Slide Toggle Transition has Completed");
});
});
});
</script>
<style>
#content,
#up {
padding: 10px;
text-align: center;
width: 500px;
text-align: center;
background-color: lightseagreen;
border: solid 1px lightgray;
}
#down {
padding: 10px;
text-align: center;
width: 500px;
text-align: center;
background-color: lightseagreen;
border: solid 1px lightgray;
}
#toggle { padding: 10px;
text-align: center;
width: 500px;
text-align: center;
background-color: lightseagreen;
border: solid 1px lightgray;
}
#content {
display: none;
height: 300px;
}
.message {
font-weight: bold;
font-size: medium;
margin-top: 30px;
color: maroon;
margin-left: 10px;
}
</style>
</head>
<body>
<span id="down">Click here to slide down</span>
<span id="up">Click here to slide up</span>
<span id="toggle">Click here to slide toggle </span>
<div id="content">
jQuery Sliding Effect<br /><br />
Slide Down<br /><br />
Slide Up<br /><br />
Slide Toggle
</div>
<div class="message"></div>
</body>
</html>Output
- The below screen gets displayed when the page is first loaded in the browser.
- In this example, slide down, slide up and slide toggle effects are applied on the div with id = “contet”.
- Two parameters ( speed and callback function) are passed to all the three methods, slideDown(), slideUp() and slideToggle().
- In all three cases, the callback function gets fired only once the sliding effect has completely finished.
- To see the effect of the slideDown() method.
- To see the effect of the slideUp() method.
- To see the effect of slideToggle() method.
Conclusion
This article discussed one of the very common and useful jQuery effects, the Sliding effect, by implementing the slideToggle() method.
- slideToggle() method performs both slideUp() and slideDown() We can use these methods to hide and show DOM elements with smooth sliding effect.
- slideToggle() method works in such a manner that if the element is initially hidden, it will be displayed, and if it is already visible, it will be
- Passing speed and a callback function as parameters to this method is completely optional.
- This method helps in adding various animation effects to the DOM elements in our web pages, making them more interactive and attractive.
Recommended Articles
This is a guide to jQuery Slidetoggle(). Here we discuss the implementation of the jQuery slideToggle() method along with the examples and outputs. You may also look at the following article.
