05
Jul
2012

Hide and show a DIV using jQuery

Posted in: jQuery , No Comments

jquery_logo
In this jQuery tutorial I will show you how you can hide a selected content / div / region and then show it when a link / button is clicked.

Step 1:
Prepare a link and a div content.

<a class="show" href="#">Click me</a>
<div id="expand">
Proin congue enim pharetra leo consectetur non posuere odio suscipit. Sed tincidunt tincidunt erat, bibendum sollicitudin purus consectetur id.
</div>

Step 2:
Call jQuery library

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

Step 3:
Now we will add jQuery code in head section and tell it to hide content of ID expand. And show the content of ID expand when link of class show is clicked.

<script type="text/javascript">
$(document).ready(function() {
	$("#expand").hide(); // This will hide the content of #expand
	$(".show").click(function() {
	$("#expand").show(); // This will show the content of #expand when link is clicked
	});
});
</script>

Done!!!
Check below link for live demo.

Show with slow speed

You can set the show speed to slow.

<script type="text/javascript">
$(document).ready(function() {
	$("#expand").hide();
	$(".show").click(function() {
	$("#expand").show('slow');
	});
});
</script>

Show with fast speed

You can set the show speed to fast.

<script type="text/javascript">
$(document).ready(function() {
	$("#expand").hide();
	$(".show").click(function() {
	$("#expand").show('fast'); 
	});
});
</script>

Show with controlled speed

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

<script type="text/javascript">
$(document).ready(function() {
	$("#expand").hide();
	$(".show").click(function() {
	$("#expand").show(2000); 
	});
});
</script>

Check below link for live demo.

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