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.
Thanks, how to create one more ul inside the ul. this code support one more level and how to do ?
Thank you very much for the tutorial! It’s easy and useful.
Hi there, i wonder, instead of clicking in the menu and the categorys dropdown, it is possible to rollover whit the mouse in the menu button and the subcategrys slide down automatacly?
Sure, just replace
.clickwith.mouseoverin the javascript.$("#accordion > li > div").mouseover(function() { ... ... }Here’s a live demo: http://jsbin.com/axasuq/edit#html,live
Thanks, how to create one more ul inside the ul. this code support one more level and how to do ?
Hi. Is there a way to highlight the tab which is opened, eg, when sports is clicked, it is black with orange text?
the menu is not compatible with Internet Explore! it can run in IE ?
It does appear to be broken in IE v9. Not on the iframed version running on this page, but if you click on the VIEW DEMO version it is.
I have checked your menu, but it is not working in internet explorer 7. Is there any solution to make it work in ie 7
It seems that it is quirks mode that is breaking it. You will need to force the browser out of quirks mode with the doc type. Also the rounded borders wont show in ie6-8 as it doesnt support it.
How do u switch to horizontal mode? Thanks!
HELP! I’ve tried this and every single Accordion Menu tutorial I can find and always come up with the same result! The demos work fine on the website, but even when I copy and paste into my own files, it won’t work! The menus will NOT expand!
Hi, Check if JQuery is properly included in your html. Also the javascript is invoked. If still doesn’t work, send me the code and I’ll have a look.
It’s a great solution and help me so much. really thank you. Salute
Thanks, for the nice tutorial. It helps me a lot!
)
Thank you so much!!! Days of searching, multiple cups of coffee later I have found this and can finally move forward! I am new to web design and am grateful for your tut!
In your tutorial you have the “Sports”, “Technology” and “Latest” surrounded by a div.
But then, in your running demo the divs are not there. I do need the divs but when I put them in my code then the example does not work.
Hi,
Thanks for the nice tutorial.
Can I gave the the submenu for an image click which is placed on right of a main category?
Hi, thanks for ur menu tutorial.. working good.. and i hav one question.. how to write position for menu..
if i hav 50 links in the menu.. and i click on 40th menu, position is not working.. pls help..
great job, but seems to have problems with IE, is there any update?? to work with IE
Very nice tutorial, great job…
Thanks a lot! And thumbs up for your support on this site!
Hi, thank you for the easy to use Accordion menu. By the way, how do I create the stylesheet into a css file and refer to it. Regards, Andrew Goh
Hi, I’ve found this little tutorial very useful but I have an issue. When I am trying to aply the stylesheet nothing happens. I linked the stylesheet from the html file and I also tried to modify the parameters like the border color or background color, but nothing happens. Would you be kind and guide me to fix or solve this problem, please?
Hi there and thanks for the tutorial!!
My code looks like this, and the accordion effect works perfectly!:
Series
China
Klima Knud
Reportage
Avantgarde world music from the toilet
Portraits
Raske Penge
Due to the fact that i have a visible background in my menu and that my ‘s are wider than the ‘s they remain within, i would like to know if there is any way that the menu width can be set to adjust to the ‘s width, as long as the ‘s are hidden?
sorry, i forgot the code field, here’s my code:
Due to the fact that i have a visible background in my menu and that my div‘s are wider than the li‘s they remain within, i would like to know if there is any way that the menu width can be set to adjust to the div‘s width, as long as the li‘s are hidden?
Thanks for a great plugin. But this is not working in IE7. I wan to make this compatable with IE 7+, Can you help me?
Thank your tutorial.
but my menu can’t expand.
it will close very fast.
can you help me?
i refresh and it’ work.
it’s fine
I cannot get this to work in iE. I was reading through the thread, but not clear as to the solution. Can someone assist? Thank you.
First Thank you for the great tutorial
It works in I.E 9 : may be upgrade your browser.
Plus ,
1) these are not working in IE. So, comment them and try again
/* -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;*/2) Make sure you added the Jquery after style ( just safeguarding)
….
3) write in complete format
<script type="text/javascript"> $(document).ready(function () { $("#accordion > li > div").click(function () { if (false == $(this).next().is(':visible')) { $('#accordion ul').slideUp(300); } $(this).next().slideToggle(300); }); $('#accordion ul:eq(0)').show(); }); </script>Thank your tutorial
How to get the current index value
Is there a way to make the menu fully expand if a user has javascript disabled?
hi…warm greetings!
please can u let me know how to fetch the menus from the database…
the codings are below:
<!DOCTYPE html> <html> <head> <script type="text/javascript" language="javascript" src="jq files/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { //slides the element with class "menu_body" when mouse is over the paragraph $("#firstpane p.menu_head").click(function() { $(this).css({backgroundImage:"url(images/down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow"); $(this).siblings().css({backgroundImage:"url(images/left.png)"}); }); }); </script> <style type="text/css"> body { margin: 10px auto; font: 75%/120% Verdana,Arial, Helvetica, sans-serif; } .menu_list { width: 150px; } .menu_head { padding: 5px 10px; cursor: pointer; position: relative; margin:1px; font-weight:bold; background:#6CC url(images/left.png) center right no-repeat; } .menu_body { display:none; } .menu_body a{ display:block; color:#006699; background-image:url(images/login_bg.jpg); padding-left:10px; font-weight:bold; text-decoration:none; text-align:left; margin-left:2px; } .menu_body a:hover{ color: #000000; text-decoration:underline; border-bottom-style:groove; background-color:#FCF; margin:1px; } #menu1 { display : none; background-color:#99C; color:#399; margin-left:930px; padding-bottom:10px; } a:link {color:black; text-decoration:none} a:hover {color:blue; background-color:#3FC; text-decoration:inherit} </style> </head> <body> <center> <div id="container" style="width:1000px; margin-top:-10px"> <div id="header" style="background-image:url(images/blue_bn.jpg);border:2px;border-color:#690"> <img src="images/simple-apple.png" width="75" height="75" border="0" align="right"/><img src="images/genie.png" width="75" height="75" border="0" align="left"/><BR/> <BR/> <span class="message"> <h1 style="margin-bottom:0; color:#000"align="center">GENIIES.COM</h1> </span> <form> <h2 style="margin-bottom:0; color:#000" align="center"> PRODUCTION TRACKING SYSTEM </h2> <!--THE IS FOR THE BUTTON TO BE AT THE END PLEASE DO NOT DELETE --> <SPAN onMouseOver="document.all.menu1.style.display='block'" onMouseOut="document.all.menu1.style.display='block'"><img src="images/settingsred.png" style="width:25px; height:25px"></SPAN><BR> <SPAN ID="menu1" onClick="document.all.menu1.style.display = 'none'"> <a href="#">Privacy</a><br> <a href="#">Security</a><br> <a href="login.php">Logout</a><br> </SPAN> </div> <div id="menu" style="background-image:url(images/blue_bn.jpg);height:500px; width:200px; float:left; text-align:center;"> <br/><br/> <br/><br/> <br/><br/> <center> <div style="float:left;margin-left:20px"> <div class="menu_list" id="firstpane"> <p class="menu_head"><img src="images/multimedia.png" width="29" height="28" align="absmiddle"/> Multimedia</p> <div class="menu_body"> <a href="#"><img src="images/pending.png" width="25" height="25" align="absmiddle"/> Pending</a> <a href="#"><img src="images/onprocess.png" width="25" height="25" align="absmiddle"/> Onprocess</a> <a href="#"><img src="images/finish.png" width="25" height="25" align="absmiddle"/> Finished</a> </div> <p class="menu_head"><img src="images/copyright.png" width="29" height="28" align="absmiddle"/> Copyright</p> <div class="menu_body"> <a href="#"><img src="images/pending.png" width="25" height="25" align="absmiddle"/> Pending</a> <a href="#"><img src="images/onprocess.png" width="25" height="25" align="absmiddle"/> Onprocess</a> <a href="#"><img src="images/finish.png" width="25" height="25" align="absmiddle"/> Finished</a> </div> <p class="menu_head"><img src="images/graphics.png" width="29" height="28" align="absmiddle"/> Graphics</p> <div class="menu_body"> <a href="#"><img src="images/pending.png" width="25" height="25" align="absmiddle"/> Pending</a> <a href="#"><img src="images/onprocess.png" width="25" height="25" align="absmiddle"/> Onprocess</a> <a href="#"><img src="images/finish.png" width="25" height="25" align="absmiddle"/> Finished</a> </div> </div> <!--Code for menu ends here--> </center> </div> <div id="content" style="background-image:url(images/globe-background-blue.jpg);height:500px;width:800px;float:right; text-align:left"> </div> <div id="footer" style="background-image:url(images/blue_bn.jpg);clear:both;text-align:center; color:#000"><br/><br/><b> Copyright@geniies.com</b> <br/><br/> </div> </div> </center> </body> </html>hi!! it posible to add Active state in these accordion? reply is great help.
I applied everything as it is but its not executing… why? my code as follows
$(document).ready(function () {
$(“#accordion > li”).click(function(){
if(false == $(this).next().is(‘:visible’)) {
$(‘#accordion > ul’).slideUp(300);
}
$(this).next().slideToggle(300);
});
$(‘#accordion > ul:eq(0)’).show();
});
Home
About Us
Price Plan
Portfolio
Contact Us
Thank you. Nice accordion menu.
Btw I’m having a problem with this. Whenever I click on any menu item, it slides down and then it slightly slide up a little bit, like jerking. I don’t want this. How to sort out this problem?
Wow ! Simple yet effective. Thanks man !
Would you have an example of multi-level displays? i.e. one menu with accordion and one of the options in this accordion having another menu, which in turn is an accordion menu with options. – i.e. 3 levels?
Really use full ,,,
Thank you..
Very nice. Is there a way that after clicking on one of the URL’s from the accordion menu that in the next page the same tab is opened unfolded which contains the URL instead of the first as default.
How to add up down arrow
I will also enjoy to see that!
Thanks! really useful to beginners
Super example and very easy to implement, thanks very much indeed.
I wonder if there’s something that needs to be added for the accordion to appear ‘closed’ when first loaded please? The top item always seems to be open when I load it.
Answered my own question – I removed the line
$('#accordion > ul:eq(0)').show();Now works perfectly – again my thanks for this superb file which I’m using as a mobile version of my website (currently a work in progress – but the navigation now works OK with this accordion)
Is there a way that after clicking on one of the URL’s from the accordion menu that in the next page the same tab is opened unfolded which contains the URL instead of the first as default.
this is Great!! thanku