A Simple and Beautiful jQuery Accordion Tutorial

Written by Kevin Liew on 30 Sep 2009
124,727 Views • Tutorials

Introduction

I was about running of ideas in tutorials, picking my own brain, and finally, I've almost forgotten the awesomeness of accordion. Yes, we will be creating a Accordion! Accordion has several characteristics:

  • Normally, the menu is displayed vertically (I have seen a horizontal one though)
  • Click on an item, it will expand its submenu and hide other submenu
  • Usually, an Accordion has indicators to show the state of the menu

So, yes, we will do that with the minimal amount of code, clean html and good looking images.

1. HTML

In this section, we use UL List to form the structure. The first level UL will be the navigation menu, and the second level UL that resides inside each first level UL's LI will be the submenu.

There is some rules over here about the classes and rel attribute, let me explain:

  • .popular, .category, .comment Classes in the anchor element (first level) are used for the styling of the menu.
  • Rel atribute in the anchor element (first level) is used by javascript to add and remove "selected state" aka change the menu image after it was clicked
  • .item class is required for each heading item
  • .last Class is used to remove border bottom for the last item
<ul id="accordion">
	<li>
		<a href="#" class="item popular" rel="popular">Popular Post</a>
		<ul>
			<li><a href="#">Popular Post 1</a></li>
			<li><a href="#">Popular Post 2</a></li>
			<li><a href="#" class="last">Popular Post 3</a></li>
		</ul>
	</li>
	<li>
		<a href="#" class="item category" rel="category">Category</a>
		<ul>
			<li><a href="#">Category 1</a></li>
			<li><a href="#">Category 2</a></li>
			<li><a href="#" class="last">Category 3</a></li>
		</ul>
	</li>
	<li>
		<a href="#" class="item comment" rel="comment">Recent Comment</a>
		<ul>
			<li><a href="#">Comment 1</a></li>
			<li><a href="#">Comment 2</a></li>
			<li><a href="#" class="last">Comment 3</a></li>
		</ul>
	</li>
</ul>

2. CSS

CSS is pretty simple, we are using two UL Lists. So, what we do is, style the first level UL, skin it with images, and after that, style the second UL List and hide it.

Have you heard about CSS Sprite? CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment. Yes, this is the image we are using for this tutorial:

CSS Sprite Menu Layout

And, if you wish to learn more about CSS, you can read my previous posts:

/* First Level UL List */
#accordion {
	margin:0;
	padding:0;	
	list-style:none;
}
	
	#accordion li {
		width:267px;
	}
	
	#accordion li a {
		display: block;
		width: 268px;
		height: 43px;	
		text-indent:-999em;
		outline:none;
	}
		
	/* Using CSS Sprite for menu item */
	#accordion li a.popular {
		background:url(menu.jpg) no-repeat 0 0;	
	}

	#accordion li a.popular:hover, .popularOver {
		background:url(menu.jpg) no-repeat -268px 0 !important;	
	}
		
	#accordion li a.category {
		background:url(menu.jpg) no-repeat 0 -43px;	
	}

	#accordion li a.category:hover, .categoryOver {
		background:url(menu.jpg) no-repeat -268px -43px !important;	
	}
		
	#accordion li a.comment {
		background:url(menu.jpg) no-repeat 0 -86px;	
	}

	#accordion li a.comment:hover, .commentOver {
		background:url(menu.jpg) no-repeat -268px -86px !important;	
	}
		
		
	/* Second Level UL List*/
	#accordion ul {
		background:url(bg.gif) repeat-y 0 0;
		width:268px;
		margin:0;
		padding:0;
		display:none;	
	}
		
		#accordion ul li {
			height:30px;
		}
			
		/* styling of submenu item */
		#accordion ul li a {
			width:240px;
			height:25px;
			margin-left:15px;
			padding-top:5px;
			border-bottom: 1px dotted #777;
			text-indent:0;
			color:#ccc;
			text-decoration:none;
		}

		/* remove border bottom of the last item */
		#accordion ul li a.last {
			border-bottom: none;
		}	

3. Javascript

There are two major sections in this javascript click event:

  • First section: Reset everything back to default. What it does, hide all the submenus and also reset all the arrow to default position.
  • Second section: Display the selected item and change the arrow direction

It gets a little bit tricky in resetting the arrow back to default position. I'm using for each method to loop thorugh the menu, grab its REL and and remove the classes. I think there are different ways to accomplish it. If you do know a better way, please let me know and I will ammend it.

	
$(document).ready(function () {
		
	$('#accordion a.item').click(function () {

		/* FIRST SECTION */
	
		//slideup or hide all the Submenu
		$('#accordion li').children('ul').slideUp('fast');	
		
		//remove all the "Over" class, so that the arrow reset to default
		$('#accordion a.item').each(function () {
			if ($(this).attr('rel')!='') {
				$(this).removeClass($(this).attr('rel') + 'Over');	
			}
		});
		
		/* SECOND SECTION */		
		
		//show the selected submenu
		$(this).siblings('ul').slideDown('fast');
		
		//add "Over" class, so that the arrow pointing down
		$(this).addClass($(this).attr('rel') + 'Over');			
	
		return false;

	});

	
});

Conclusion

Like this tutorials? You can express your gratitude by visiting my sponsors on the sidebar, bookmark it and help me to spread this tutorial to our friends! :) Thanks!

Demo Download
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

55 comments
bucabay 12 years ago
There are a few functionality issues such as clicking on the currently open item will close it and open it again. Clicking on a child, will close the parent etc. Other then that it is very nice.
Reply
fanta 10 years ago
exactly, how to fix it?
Reply
sandeep 10 years ago
below is the complete solution for the current item close-open problem
<head>
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript">

$(document).ready(function() {

$('.question').click(function()
{
$('.question').removeClass('active');

$('.content').slideUp('normal');

if($(this).next().is(':hidden') == true) {

$(this).addClass('active');

$(this).next().slideDown('normal');
}
});

$('.content').hide();

});

</script>

<style>

a {border:1px solid #000; display:block; height:25px; margin:0 0 5px 0}
.active {background:#000; color:#fff}
</style>


</head>

<body>

<div class="accordion">
<a class="question" href="#">test1</a>
<p class="content">text1</p>

<div style="clear:both"></div>

<a class="question" href="#">test2</a>
<p class="content">text2</p>

<div style="clear:both"></div>

<a class="question" href="#">test3</a>
<p class="content">text3</p>

<div style="clear:both"></div>

</div>




</body>


</html>
Reply
Tai Travis 12 years ago
I love the simplicity of it. I wasted my time trying implement the JQuery UI Accordian which is bloated and poorly written. Your simple efficient approach is giving me a solid place to expand from.
Couple pointers:
* JQuery is now v.1.3.2.
* The easing plugin appears to not being used by your script.
* The demonstration closes the accordion on page load while the example code does not. Please add this to the code above:
$(\'#accordion li\').children(\'ul\').hide();

Thanks again for being such a great resource. Cheers.
Reply
kevin Admin 11 years ago
Thanks for suggestion. :)
Reply
Patrizio Quatrini 11 years ago
Hello there, great tutorial but if I can, I\'d like suggest You to write \"display:none\" not inside CSS but in the js Code to let the list more accessible if the JS is disable. Thank You for reading.
Reply
drizzy 11 years ago
is it possible for it to collapse more into sub heading as well?

So basically if you had a heading:

i.e.

> Major Attractions ‘you click that it drops down to’
> CN Tower ‘and when you click that it drops down
> ‘a short description of the CN tower’

is something like that possible ?
Reply
Nic 11 years ago
How do I get the links to work in the child ul currently by clicking these links the section just closes and does not goto the link.
Reply
KIRAN 11 years ago
hi i am using jquery Collapsing menu
my Q is if on page load every time it get open 1st menu , but if i want to open any other den wht i can do
her isthe js for same
function initMenu() {
$('#menu ul').hide();
$('#menu ul:first').show();
$('#menu ul').hide();
$('#menu li a').click(
function() {
var checkElement = $(this).next();
alert(checkElement.id);
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenu();});
Reply
Tutorials99 11 years ago
good wok friend..
I found another site having top page rank professional tutorials.see link below,I hope its helpful

http://www.tutorials99.com
Reply
ilz 11 years ago
The "tutorial" link on the demo page goes to the wrong tutorial, FYI.
Reply
Phillie 11 years ago
to get links to work, change return false;
to return;
Reply
Chris 10 years ago
thanks Philly - good tip here.

Does anyone have the following problems:
Where when they click it makes their browser scroll to the left (to the limit of the site)?
Extreme padding around the li buttons? I cant find how to adjust the spacing
Reply
Raghibsuleman 11 years ago
Thanks for Download jquery accordion
Reply
reis 11 years ago
is there a way to have this begin with all levels close? mine seems to be fully expanded when I first open the page.
Reply
kevin Admin 11 years ago
Hi reis, I'm not sure what's the problem, but please refer to the demo, all the tabs are closed from the start.
Reply