Create Simplest Accordion Menu using jQuery
- By Viral Patel on September 17, 2009
- Featured, JQuery
Let us create a simple Accordion Menu using jQuery. Accordion Menu are the menu with some animation effect. It has few top line menu items which when clicked toggles to open sub menu options. When another top level menu is selected, other open menu will automatically collapse and save useful screen area. We will use jQuery effects to animate the accordion menu. jQuery provides Fade In/Fade Out effect, but accordion menu looks more realistic if we use Slide In / Slide Out effect.
Related: 20 jQuery Tips & Tricks
Step 1: Create HTML for your Menu
First we will create HTML for displaying out Menu. We will use List in HTML to render the menu and then we will use CSS to apply some style. Following will be our Menu code:
<ul id="accordion"> <li>Sports</li> <ul> <li><a href="#">Golf</a></li> <li><a href="#">Cricket</a></li> <li><a href="#">Football</a></li> </ul> <li>Technology</li> <ul> <li><a href="#">iPhone</a></li> <li><a href="#">Facebook</a></li> <li><a href="#">Twitter</a></li> </ul> <li>Latest</li> <ul> <li><a href="#">Obama</a></li> <li><a href="#">Iran Election</a></li> <li><a href="#">Health Care</a></li> </ul> </ul>
If you check the HTML page now it should look something like:
Step 2: Apply some style to your Menu using CSS
Lets apply some stylesheet to our menu. Copy following CSS code in your HTML file:
#accordion {
list-style: none;
padding: 0 0 0 0;
width: 170px;
}
#accordion li{
display: block;
background-color: #FF9927;
font-weight: bold;
margin: 1px;
cursor: pointer;
padding: 5 5 5 7px;
list-style: circle;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#accordion ul {
list-style: none;
padding: 0 0 0 0;
display: none;
}
#accordion ul li{
font-weight: normal;
cursor: auto;
background-color: #fff;
padding: 0 0 0 7px;
}
#accordion a {
text-decoration: none;
}
#accordion a:hover {
text-decoration: underline;
}
Note that in above CSS code, we have applied Round Corner CSS to our menu to improve the look. Although this technique works with all the modern web browser, but it will not work with Internet Explorer. If we want to change the look n feel for internet explorer, we may want to include IE-Specific stylesheet to our HTML page.
Once we apply the stylesheet, our menu will look like:
Step 3: Give life to your Menu using jQuery
So our basic skeleton is complete. We have used HTML code to display the Accordion menu content and then have applied CSS stylesheet to improve the usability. Let us add life to this accordion menu using jQuery. Copy following jQuery code to the HTML page:
$("#accordion > li").click(function(){
if(false == $(this).next().is(':visible')) {
$('#accordion > ul').slideUp(300);
}
$(this).next().slideToggle(300);
});
$('#accordion > ul:eq(0)').show();
If you notice the above code, we have made the first menu item in accordion menu visible.
$('#accordion > ul:eq(0)').show();
To make a menu item visible by default, just add its index value to the above code. For example to display 1st menu item we added eq(0) in above code.
Online Demo
No article is complete without an online demo. Here is the online demo for Accordion Menu.
Get our Articles via Email. Enter your email address.
NIce post , i will try to work it out
This is cool! Thanks for sharing
Nice menu, but it would be better if the html code was valid (whether it is html or xhtml).
The “level-two” list blocks (ul) should be nested in the inherent item, like explained in the third example there : http://reference.sitepoint.com/html/ul
him
very nice post …
tested in IE6,7,8- it doesn’t work..
Thanks, nice and in ul li great
If you use valid HTML (as cilia pointed out above), then this worked for me:
$(“#accordion > li”).click(function(){
if(false == $(this).children().is(‘:visible’)) {
$(‘#accordion > li > ul’).slideUp(300);
}
$(this).children().slideToggle(300);
});
$(‘#accordion > li > ul:eq(0)’).show();
You may want to modify the css as the rounded corners don’t look good as the ul is now inside the li.
… and if you have a menu where some items do not have submenus, then add the ‘ul’ filter:
$(this).children(‘ul’).slideToggle(300);
otherwise it will roll up itself.
thats awsome for a biginner ….
Hi,
This is not work on IE 6/7. Please anybody can tell me how it can be possible??
Thanks,
Pravin.
nice tutorial, I have also wrtten a simple on on my blog here:
http://ranacseruet.blogspot.com/2009/12/simple-accordion-using-jquery.html
The reason this does not to work in IE is due to the fact that the HTML used is invalid, and ot a problem with IE (for a change).
You can’t put a UL directly inside another UL. The sub menu UL needs to go inside the LI but that requires a rewite of the css and javascript.
When I’ve worked it out I’ll post a solution. Unless someone beats me to it.
Apologies, I just noticed someone already pointed out the invalid HTML in an earlier comment
Love This!
Awesome tutorial on Jquery. I was looking for such an article. Thanks dude!
Awesome tutorial on Jquery.
I have implemented this code works fine for me.
I had a question.
How can we modify this menu id submenu is menu and there is submenu below it.
In other words if we have tree like menu.
Hi,
I love this menu, firstly is it okay to use on a website for a charity?
Secondly, Do you have a workaround so that it works okay in IE6/IE7???
Any help would be much appreciated!
Keep up the great work,
Chris
@Chris: Ofcourse you can use this on any website. This tutorial is to just demonstrate in simple way how to create an accordion menu. Feel free to use and if possible link back to this tutorial so that others can find this.
Regarding the workaround, I will suggest you to take a look at jQuery UI Accordion: http://jqueryui.com/demos/accordion/
Hope this will help.