30
Apr
2012

jQuery Show Hide

Posted in: jQuery , No Comments

jquery_logo

In this jQuery tutorial I will show you how you can use jQuery to show hide something or a DIV region with a click. Its very easy to do with jQuery.

Step 1:
Write basic HTML code

<!DOCTYPE html>
<html>
<head>
<title>Jquery Expand on click</title>
<meta charset="utf-8" />
</head>
<body>
<a href="#" class="mybutton">Click Me</a>
<div id="myexpand">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</div>
</body>
</html>

Step 2:
Include jQuery library in head section.

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

Step 3:
Add some CSS for styling in head section.

<style type="text/css">
body {
width: 960px;
margin: 0 auto;
padding: 0;
font-family: Lucida Grande, Verdana, Arial, sans-serif;
font-size: 14px;
}
#myexpand {
background: #d1d1d1;
text-shadow: 1px 1px #fff;
}
</style>

Step 4:
Add jQuery code in head section.

<script type="text/javascript">
$(document).ready(function()
{
$("#myexpand").hide(); // First let's hide #myexpand div region.
$(".mybutton").click(function(){ // declare a new function for click action on class .mybutton
$("#myexpand").show(500); // this will show content of ID #myexpand in 500 milli seconds
});
</script>

So, our final code is:

<!DOCTYPE html>
<html>
<head>
<title>Jquery Expand on click</title>
<meta charset="utf-8" />
<style type="text/css">
body {
width: 960px;
margin: 0 auto;
margin-top: 40px;
padding: 0;
font-family: Lucida Grande, Verdana, Arial, sans-serif;
font-size: 14px;
}
#myexpand {
background: #d1d1d1;
text-shadow: 1px 1px #fff;
padding: 10px;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#myexpand").hide(); // First let's hide #myexpand div region.
$(".mybutton").click(function(){ // declare a new function for click action on class .mybutton
$("#myexpand").show(500); // this will show content of ID #myexpand.
});
</script>
</head>
<body>
<a href="#" class="mybutton">Click Me</a>
<div id="myexpand">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</div>
</body>
</html>

Demo


Similarly we can hide a DIV region with help of jQuery. Check below sample code and live demo.

<!DOCTYPE html>
<html>
<head>
<title>Jquery Expand on click</title>
<meta charset="utf-8" />
<style type="text/css">
body {
width: 960px;
margin: 0 auto;
margin-top: 40px;
padding: 0;
font-family: Lucida Grande, Verdana, Arial, sans-serif;
font-size: 14px;
}
#myexpand {
background: #d1d1d1;
text-shadow: 1px 1px #fff;
padding: 10px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".mybutton").click(function(){ // declare a new function for click action on class .mybutton
$("#myexpand").hide(400); // this will show content of ID #myexpand.
});
});
</script>
</head>
<body>
<a href="#" class="mybutton">Click Me</a>
<div id="myexpand">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</div>
</body>
</html>

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