jQuery comes with three handy methods to create the sliding effect easily.
- slideUp() – Hide the matched elements with slide up effect.
- slideDown() – Display the matched elements with slide down effect.
- slideToggle() – If the matched element is displayed, it will hide with a slide up effect; if hidden, it will display with a slide down effect.
Above three methods are support duration as parameter : slow, fast, or exact milliseconds. If this parameter is omitted, the default 400 milliseconds is apply.
Try it yourself
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
.slideDownbox, .slideUpbox, .slideTogglebox{
float:left;
padding:8px;
margin:16px;
border:1px solid red;
width:200px;
height:50px;
background-color:#000000;
color:white;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<h1>jQuery slideUp(), slideDown() and slideToggle() example</h1>
<div class="clear">
<h2>slideDown() example</h2>
<div class="slideDownbox">
Click me - slideDown()
</div>
<div class="slideDownbox">
Click me - slideDown()
</div>
</div>
<div class="clear">
<h2>slideUp() example</h2>
<div class="slideUpbox">
Click me - slideUp()
</div>
<div class="slideUpbox">
Click me - slideUp()
</div>
</div>
<div class="clear">
<h2>slideToggle() example</h2> <button id=slideToggle>slideToggle()</button>
<br/>
<div class="slideTogglebox">
slideToggle()
</div>
<div class="slideTogglebox">
slideToggle()
</div>
</div>
<br/><br/>
<div class="clear">
<button id=reset>Reset</button>
</div>
<script type="text/javascript">
$(".slideDownbox").click(function () {
$(this).hide().slideDown('slow');
});
$(".slideUpbox").click(function () {
$(this).slideUp(2000);
});
$("#slideToggle").click(function () {
$('.slideTogglebox').slideToggle();
});
$("#reset").click(function(){
location.reload();
});
</script>
</body>
</html>
Hello! Someone in my Facebook group shared this website with us so I came to check it out. I’m definitely enjoying the information. I’m bookmarking and will be tweeting this to my followers! Outstanding blog and superb design and style. kfagdgkbfegkgefg
i want to create a menu with a function slid_toggle() but the below content does not move down..
oh man, tks for the patience
you the best
best code,
best blog
and you are the man 😀 😀
Thank you… Good very good…
Hi there! I know this is kinda off topic but I was wondering which blog platform are you
using for this website? I’m getting sick and tired of WordPress because I’ve
had problems with hackers and I’m looking at alternatives for another platform. I would be fantastic if you could point me in the direction of a good platform.
that’s what i wanted to use on my main div of the site. so it starts to slidedown when the page is loaded. unfortunately i don’t get it to work properly (the div shows up before i can hide it) 🙁
maybe someone can help me?
best
Very nice Toggle effect, thanks for sharing!
Thank you friend, I have a question,
That I must do in order that the div proves to be hidden by fault ???
I’m unable to get this effect … really don’t know why!!!
I have also worked on a similar kind of example from w3schools.
The jQuery code which is working in some online editors is not effective on my system.
Looking for your help !!!
Thanx for that its really nice demo
Hello,
Loved the example, but what if i want the content to be hiden when the page is loaded?
I tried various things without success. Can you suggest something?
Use this – http://api.jquery.com/hide/
Not sure if you’re still checking this, but HOW do you implement the hide on load function?
Never mind, it was strangely easy. I just added that small snippet to the top of the java code and it worked. Hope I did that right. Cheers!!
really great effect, i’ll try it on my next project, thanks man:)
It looks so amazing. I must do it on some design websites. 🙂
Thank you for sharing.
Great Article! I love how simple you have made it for a user to easily get a grasp on jQuery. Great code snippets. I found this article because I was doing some research for other beginner articles on jQuery. Good job and thanks again.
BTW, I have created a simple jQuery slideup and slidedown article that I feel would be targeted at very basic users, anyway let me know what you think, it’s at: http://www.tonylea.com/2010/jquery-slideup-and-slidedown/
Thanks 🙂