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

About the Author

mkyong
Founder of Mkyong.com and HostingCompass.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

  • Pingback: stop parking()

  • Pingback: water ionizer loan()

  • Pingback: alkaline water benefits()

  • Pingback: parking()

  • Pingback: penge lan nu()

  • Pingback: mobile porn()

  • Pingback: call tvpackages.net today()

  • Pingback: enagic()

  • Pingback: kangen water machine()

  • Pingback: alkaline water()

  • Pingback: water ionizers()

  • Pingback: watch movies online free()

  • Pingback: watch tv show episodes()

  • Pingback: watch free movies online()

  • Pingback: Watch Video()

  • Pingback: Blue Coaster33()

  • Pingback: Web Resources To Help Build A Great Website | Alpha Creative Design()

  • http://www.fatchkraftmakina.com Fatch Kraft

    Thank you… Good very good…

  • http://www.slideshare.net/diannegeivw/ralphs-coupons-find-coupons-here 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.

  • http://hochzeit-trauung.com 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

  • Pingback: jQuery????div???? | t1u()

  • http://www.pozivnice.hr Pozivnice za Vjen?anje

    Very nice Toggle effect, thanks for sharing!

  • Ariel

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

  • 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

    Thanx for that its really nice demo

  • Pingback: Driving directions in native iOS and Android apps | thumblines()

  • 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?

  • http://www.kontaktne-lece.hr/ Le?e

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

  • http://www.pet-point.net ku?ni ljubimci

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

    Thank you for sharing.

  • http://www.tonylea.com 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 :)