30
Apr
2012

jQuery Accordion

jquery_logo
In this jQuery tutorial I will show you how to create jQuery Accordion.
Accordion is very useful to show many contents in a small space and in fancy way.

Step 1: Prepare basic HTML page

<!DOCTYPE html>
<html>
<head>
<title>A simple Accordion with jQuery</title>
<meta charset="utf-8" />
</head>
<body>
<div id="accordion">
<h3>Title of first<</h3>
<p>content of first box</p>
<h3>Title of second</h3>
<p>content of second box</p>
<h3>Title of third</h3>
<p>content of third box</p>
<h3>Title of forth</h3>
<p>content of fourth box</p>
<h3>Title of fifth</h3>
<p>content of fifth box</p>
</div>
</body>
</html>

Step 2: Add used CSS styles in head section.

<style type="text/css">
#accordion h3{
width: 400px;
height: 30px;
background: #4d4d4d;
color: #fff;
border: 1px solid #000;
margin: 0;
padding: 5px 0;
cursor: pointer;
}


#accordion p{
background: #c9c9c9;
margin: 0;
padding: 0;
width: 400px;
min-height: 100px;
}
</style>

Step 3: Add jQuery library in head section.

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

Step 4: Add jQuery slideUp() and slideDown() code in head section.
Below code will open the first heading content and will hide other content regions. On clicking any header, it will open its respective content and will hide other content regions.

<script type="text/javascript">
$(document).ready(function() {
	var headings = $('#accordion h3'), paras = $('#accordion p'); // selecting heading and paragraph elements and saving them in variable.
	paras.hide().eq(0).show(); // hide all paragraph except first one
	headings.click(function() {
	var cur = $(this); //save the element that has been clicked for easy referral
	cur.siblings('#accordion p').slideUp(); //hide all the paragraphs
	cur.next('#accordion p').slideDown(); //get the next paragraph and show it
	});
});
</script>

So, our final code is:

<!DOCTYPE html>
<html>
<head>
<title>A simple Accordion with jQuery</title>
<meta charset="utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style type="text/css">
body {
width: 980px;
margin: 0 auto;
padding: 0;
font-family: Lucida Grande, Verdana, Arial, sans-serif;
font-size: 14px;
}
#accordion h3{
width: 400px;
height: 30px;
background: #4d4d4d;
color: #fff;
border: 1px solid #000;
margin: 0;
padding: 5px 0;
}
#accordion h3:hover{
cursor: pointer;
}

#accordion p{
background: #c9c9c9;
margin: 0;
padding: 0;
width: 400px;
height: 100px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
	var headings = $('#accordion h3'), paras = $('#accordion p'); // selecting heading and paragraph elements and saving them in variable.
	paras.hide().eq(0).show(); // hide all paragraph except first one
	headings.click(function() {
	var cur = $(this); //save the element that has been clicked for easy referral
	cur.siblings('#accordion p').slideUp(); //hide all the paragraphs
	cur.next('#accordion p').slideDown(); //get the next paragraph and show it
	});
});
</script>
</head>
<body>
<div id="accordion">
<h3>Title of first</h3>
<p>content of first box</p>
<h3>Title of second</h3>
<p>content of second box</p>
<h3>Title of third</h3>
<p>content of third box</p>
<h3>Title of forth</h3>
<p>content of fourth box</p>
<h3>Title of fifth</h3>
<p>content of fifth box</p>
</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