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