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">
	<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-format="fluid"
     data-ad-layout="in-article"
     data-ad-client="ca-pub-2836379775501347"
     data-ad-slot="6894224149"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script><h2>slideDown() example</h2>
	
	<div class="slideDownbox">
		Click me - slideDown()
	</div>
	
	<div class="slideDownbox">
		Click me - slideDown()
	</div>
</div>

<div class="clear">
	<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-2836379775501347"
     data-ad-slot="8821506761"
     data-ad-format="auto"
     data-ad-region="mkyongregion"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><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 the Author

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

Comments

Leave a Reply

avatar
newest oldest most voted
Praba
Guest
Praba

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
Guest
Tio nélio Do Rincão

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

best blog

and you are the man :D :D

trackback
Web Resources To Help Build A Great Website | Alpha Creative Design

[…] SlideToggle Example […]

Fatch Kraft
Guest
Fatch Kraft

Thank you… Good very good…

Ralphs coupon code
Guest
Ralphs coupon code

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
Guest
Lisa @ Hochzeit & Trauung

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

trackback
jQuery????div???? | t1u
Pozivnice za Vjen?anje
Guest
Pozivnice za Vjen?anje

Very nice Toggle effect, thanks for sharing!

Ariel
Guest
Ariel

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

SRIKANTH
Guest
SRIKANTH

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
Guest
Anant

Thanx for that its really nice demo

trackback
Driving directions in native iOS and Android apps | thumblines

[…] or JQuery experience, this turned out to be pretty easy to implement. (And I got some help from this blog post on mkyong.com.) It isn’t going to win any design awards, but it gets the job done […]

Laurent
Guest
Laurent

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?

Le?e
Guest
Le?e

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

ku?ni ljubimci
Guest
ku?ni ljubimci

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

Thank you for sharing.

Tony Lea
Guest
Tony Lea

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 :)