05
Jul
2012

jQuery SlideToggle

Posted in: jQuery , , No Comments

jquery_logo
jQuery SlideToggle() method is used to display the matched elements if its hidden and hide it if displayed with slide effect. Thus you can show and hide an element with an animated slide effect.

If the matched element is displayed, it will hide with a slide up effect. And if hidden, it will display with a slide down effect.

Step 1:
Define a ID box of width: 200px and height: 200px

#box {
width: 200px;
height: 200px;
background: red;
}

Step 2:
Display this box region.

<div id="box"></div>

Step 3:
Call jQuery Library

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Step 4:
Now we will add jQuery code in head section and tell it to toggle ID box when a link of class slide is clicked.

<script type="text/javascript">
$(document).ready(function() {
	$(".slide").click(function() {
	$("#box").slideToggle();
	});
});
</script>

Done!!!
Check below link for live demo.

Toggle with slow speed

You can set the Toggle speed to slow. Use below code for slow SlideToggle effect.

<script type="text/javascript">
$(document).ready(function() {
	$(".slide").click(function() {
	$("#box").slideToggle('slow');
	});
});
</script>

Toggle with fast speed

You can set the Toggle speed to fast. Use below code for fast SlideToggle effect.

<script type="text/javascript">
$(document).ready(function() {
	$(".slide").click(function() {
	$("#box").slideToggle('fast');
	});
});
</script>

Toggle with controlled speed

You can set the Toggle speed to a certain value. Use below code to SlideToggle in 2 seconds.

<script type="text/javascript">
$(document).ready(function() {
	$(".slide").click(function() {
	$("#box").slideToggle(2000);
	});
});
</script>

About the Author

Name: Ravi Shekhar
I love learning and sharing web stuffs.

Share this post

Twitter Facebook Google Buzz Digg StumbleUpon Delicious Technorati

Leave a Reply