Create Simplest Accordion Menu using jQuery
- By Viral Patel on September 17, 2009
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><div>Sports</div> <ul> <li><a href="#">Golf</a></li> <li><a href="#">Cricket</a></li> <li><a href="#">Football</a></li> </ul> </li> <li><div>Technology</div> <ul> <li><a href="#">iPhone</a></li> <li><a href="#">Facebook</a></li> <li><a href="#">Twitter</a></li> </ul> </li> <li><div>Latest</div> <ul> <li><a href="#">Obama</a></li> <li><a href="#">Iran Election</a></li> <li><a href="#">Health Care</a></li> </ul> </li> </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 div {
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;
}
#accordion ul{
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 > div").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
@Cilia – I have modified the source and made it valid HTML. Have a look. Now the sub
<UL>is part of main accordion<LI>. This should not break the HTML validation now.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.
Most of your codes are not cross platform,like this one doesnt work in the internet explorer so a waste for us as not cross platform…
great ……….
nice sliding
Beautiful, great, nice!!! But it won’t work in IE! Stupid browser….
Thanks, nice and in ul li great
Thanks for useful example, but XianWare solution was quite good for me. I’ve got valid html in my wordpress blog
Nice tutorial… thanks for sharing
here an another jQuery menu link:
http://www.bijusubhash.com/blog/redbrown-drop-down-menu-using-jquery-and-css
This is great but you made some mistakes and in the end your site won’t validate with that.
for example, your lists aren’t organized correctly, they should be (note, the lists within the lists are actually put inside the top buttons list item, so Sports hockey
Sports
Golf
Lacrosse
Hockey
I just like valid code, otherwise this is cool!
Cool stuff you solved my problem
Hi,
First of all thanks for the tutorial. It really helped me out for an important site.
But there is one more thing I’d like to do.
I want menu title color to be changed when clicked on it.
I can do that when you go to the page with a simple class=”active” solution but when you’re viewing submenus without opening any pages, how to do that?
hi
thanks for the tutorial.as successfully completed my accordion menu..
but now i need a struts2 jquery horizontal menu..
can any body help me out please..
Thanks,
This is very easy and nice tutorial to understand and use accordian.
What if you have more levels?
With this solution only the first level will open and collapse.
Hi,
Very simple and stylish!
Unfortunately oval background don’t work in IE9, do you know how to fix it?
thanks
how can i change the code for the menu to respond on mouseover instead of onclick?..can any1 help plz
Hello, I would like to ask: where I should put the Step 3: Give live to your menu…? I would like to integrate this menu to my Blogger templates. Thank you for your kindly help. Vasek
On #accordion div, I think you forgot to put px after the three 5… (5 5 5 7px).. thanks for the article!
Hi, this is quite a nice script. I was wondering how I could have the submenu to drop down on mouse over and how to add horizontal slide out to the right of the submenu items when you mouse over them.
Awesome!
As valid today as it was when you created this tutorial.
Jquery UI is such a pain, especially with such an elegantly simple solution such as yours!
(Although, if you are using Jquery, why not use the “$(document).ready(function() {});”)
hai it’s nice but this radius is not work in explorer
could i choose default .show() to be number 3 like “latest” in an example
To show third category by default and hide rest, you can use following code. Note that
eq(2)selects the third list which in this case is “Latest”.$('#accordion ul:eq(2)').show();Hi,
Yes, very nice little accordion, but. I do not want the first sub menu to show when the page loads. when i comment out that line, the accordion closes when I click on a child of that menu. I want that menu to stay open while on those child menu choices. I only want it to close wen they click on a different parent. does that make sense? look my client site on the ‘events’ page. the accordions are on the 2nd & 3rd buttons. I am still cleaning up the templates so only the 2nd accordion has live links. the links with a # href, hold their position just fine.
Thank you
All I get is a text box with the 3 categories and their children listed. New to this coding thing, so maybe I need to add something in the HTML part.
I have used this in web user control, and register that in an .aspx form, but it is not working,
If i click the menu it does not displays anything.
Note: I include all the code that u have posted here!
I have run this in Google chrome but it is not working, help me!
@Ganesh – I am using Chrome. Its working perfectly for me. Check this demo in Chrome – http://viralpatel.net/blogs/demo/jquery-accordion-menu-example/
hey thanks for Viral Patel actualy i am searching for solution in ie for more than 24 hrs this is awesome thanks
How can i use this for bind data from database in asp.net c#
,
Thanks you so much… no words… stunning script!