18
Jul
2012

Simple jQuery Toggle


In this jQuery tutorial I will show you how to create toggle content with the help of jQuery. When user click the title, related content will toggle (show / hide). This is an useful and attractive interface feature and allow designers to save space.

Step 1:
Crete a basic HTML content

<div class="toggle">
<h3>Title One</h3>
<p>One pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

<h3>Title Two</h3>
<p>Two ellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>


<h3>Title Three</h3>
<p>Three ellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>


<h3>Title Four</h3>
<p>Four ellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>


<h3>Title Five</h3>
<p>Five ellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>

Step 2:
Add CSS to style the toggle.

.toggle h3{
cursor: pointer;
background: #5b6274;
margin:0;
padding: 0;
border-bottom: 1px solid #282e3b;
border-top: 1px solid #798194;
font-size: 14px;
color: #fff;
padding: 4px 10px;
}
.toggle p{
background: #e1e1e2;
text-shadow: 1px 1px #fff;
margin:0;
padding: 4px 10px;
font-size: 12px;
}

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 hide all p contents. When the h3 title is clicked it will toggle its next p content.

<script type="text/javascript">
$(document).ready(function(){
	$(".toggle p").hide();
	$(".toggle h3").click(function() {
	$(this).next().slideToggle('fast');
	});
});
</script>

In above jQuery code you can modify the toggle speed.

Check 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