Main Tutorials

jQuery slideUp(), slideDown() and slideToggle() example

jQuery comes with three handy methods to create the sliding effect easily.

  1. slideUp() – Hide the matched elements with slide up effect.
  2. slideDown() – Display the matched elements with slide down effect.
  3. 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>

About Author

author image
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

Subscribe
Notify of
17 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Ariel
11 years ago

Thank you friend, I have a question,
That I must do in order that the div proves to be hidden by fault ???

Smithf240
5 years ago

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

Praba
9 years ago

i want to create a menu with a function slid_toggle() but the below content does not move down..

Tio nélio Do Rincão
10 years ago

oh man, tks for the patience
you the best
best code,

best blog

and you are the man 😀 😀

Fatch Kraft
10 years ago

Thank you… Good very good…

Ralphs coupon code
10 years ago

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.

Lisa @ Hochzeit & Trauung
11 years ago

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

Pozivnice za Vjen?anje
11 years ago

Very nice Toggle effect, thanks for sharing!

SRIKANTH
11 years ago

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 !!!

Anant
11 years ago

Thanx for that its really nice demo

Laurent
12 years ago

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?

J. DOT
8 years ago
Reply to  mkyong

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!!

J. DOT
8 years ago
Reply to  mkyong

Not sure if you’re still checking this, but HOW do you implement the hide on load function?

Le?e
12 years ago

really great effect, i’ll try it on my next project, thanks man:)

ku?ni ljubimci
13 years ago

It looks so amazing. I must do it on some design websites. 🙂

Thank you for sharing.

Tony Lea
13 years ago

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 🙂