Create Simplest Accordion Menu using jQuery

[ad name=”AD_INBETWEEN_POST”] 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
accordion-menu-example

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:
html-menu-list

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:
accordion-menu-stylesheet

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.

VIEW DEMO

DOWNLOAD

Get our Articles via Email. Enter your email address.

You may also like...

125 Comments

  1. Sourish Nath says:

    NIce post , i will try to work it out

  2. This is cool! Thanks for sharing

  3. cilia says:

    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

    • Viral Patel says:

      @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.

      • Butt says:

        your site is very helpful

  4. ricky says:

    him
    very nice post …
    tested in IE6,7,8- it doesn’t work..

  5. Great Thanks says:

    Thanks, nice and in ul li great

  6. XianWare says:

    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.

  7. XianWare says:

    … 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.

  8. Rizwan says:

    thats awsome for a biginner ….

  9. PRavin says:

    Hi,
    This is not work on IE 6/7. Please anybody can tell me how it can be possible??

    Thanks,
    Pravin.

  10. rana says:

    nice tutorial, I have also wrtten a simple on on my blog here:
    http://ranacseruet.blogspot.com/2009/12/simple-accordion-using-jquery.html

  11. Nigel says:

    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.

  12. Nigel says:

    Apologies, I just noticed someone already pointed out the invalid HTML in an earlier comment

  13. Tina says:

    Love This!

  14. alex says:

    Awesome tutorial on Jquery. I was looking for such an article. Thanks dude!

  15. Prashant says:

    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.

  16. Chris says:

    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

    • Viral Patel says:

      @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.

  17. aditya says:

    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…

  18. prem says:

    great ……….
    nice sliding :D

  19. NNN says:

    Beautiful, great, nice!!! But it won’t work in IE! Stupid browser….

  20. kondigg says:

    Thanks, nice and in ul li great

  21. appsolutions says:

    Thanks for useful example, but XianWare solution was quite good for me. I’ve got valid html in my wordpress blog

  22. Biju Subhash says:

    Nice tutorial… thanks for sharing
    here an another jQuery menu link:

    http://www.bijusubhash.com/blog/redbrown-drop-down-menu-using-jquery-and-css

  23. Eben McKinney says:

    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!

  24. Mr K says:

    Cool stuff you solved my problem

  25. Kubilay says:

    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?

  26. sreejith says:

    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..

  27. Mohan says:

    Thanks,
    This is very easy and nice tutorial to understand and use accordian.

  28. Davy says:

    What if you have more levels?
    With this solution only the first level will open and collapse.

  29. Alexander says:

    Hi,
    Very simple and stylish!
    Unfortunately oval background don’t work in IE9, do you know how to fix it?
    thanks

  30. dinesh says:

    how can i change the code for the menu to respond on mouseover instead of onclick?..can any1 help plz

  31. Vasek says:

    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

  32. Franz says:

    On #accordion div, I think you forgot to put px after the three 5… (5 5 5 7px).. thanks for the article!

  33. Jaybee says:

    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.

  34. Felixius says:

    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() {});”)

  35. biju says:

    hai it’s nice but this radius is not work in explorer

  36. Kubodo says:

    could i choose default .show() to be number 3 like “latest” in an example

    • Viral Patel says:

      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();
      
  37. 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

  38. Hozey says:

    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.

  39. Ganesh.s says:

    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!

  40. Ganesh.s says:

    I have run this in Google chrome but it is not working, help me!

  41. vinoth says:

    hey thanks for Viral Patel actualy i am searching for solution in ie for more than 24 hrs this is awesome thanks

  42. Ganesh.S says:

    How can i use this for bind data from database in asp.net c#
    ,

  43. Thanks you so much… no words… stunning script!

  44. Aafaq M says:

    Excellent script.. Thanks a LOT for sharing…!!!

  45. nice post!!!!!!!!!!!!!!

  46. Prodyot says:

    Cute accordion.
    It works in IE too (at least it does in my computer) :)
    Thanks.

  47. Viorel says:

    i try to use this menu in mvc-3, but i don’t understand because jQuery code is not working, can everyone help me?

  48. please which of the section should i paste the J query code

  49. please which part of my html should i paste the jquery code, its not working for me.

  50. Jam says:

    Nice tutorials, Thanks

  51. Jameel says:

    Thanks, how to create one more ul inside the ul. this code support one more level and how to do ?

  52. Rach says:

    Thank you very much for the tutorial! It’s easy and useful.
    :D

  53. mB says:

    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?

  54. Agustin says:

    Thanks, how to create one more ul inside the ul. this code support one more level and how to do ?

  55. david says:

    Hi. Is there a way to highlight the tab which is opened, eg, when sports is clicked, it is black with orange text?

    • Gokhale says:

      Hi David,
      Did you find solution for your question. If you have solution can you please share with me.
      Currently I’m in the same situation. Your immediate reply is appreciated.

      Thanks

  56. Tefymahery says:

    the menu is not compatible with Internet Explore! it can run in IE ?

    • JimS says:

      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.

  57. Pratheesh says:

    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

    • Gerhard says:

      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.

  58. TD says:

    How do u switch to horizontal mode? Thanks!

  59. Jason Bodine says:

    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!

    • Viral Patel says:

      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.

  60. Patrick says:

    It’s a great solution and help me so much. really thank you. Salute

  61. Christiane says:

    Thanks, for the nice tutorial. It helps me a lot! :-))

  62. raeyanna says:

    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!

  63. saki says:

    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.

  64. Anu says:

    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?

  65. umapathy says:

    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..

  66. Daniel says:

    great job, but seems to have problems with IE, is there any update?? to work with IE

  67. HeadHunter says:

    Very nice tutorial, great job…

  68. peterpan says:

    Thanks a lot! And thumbs up for your support on this site!

  69. Andrew Goh says:

    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

  70. 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?

  71. 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?

  72. sorry, i forgot the code field, here’s my code:

    
     <ul id="accordion">
    	<div>Series</div>
    	<ul>
    		<li>China</li>
    		<li>Klima Knud</li>
    	</ul>
    	<div>Reportage</div>
    	<ul>
    		<li>Avantgarde world music from the toilet</li>
    	</ul>
    	<div>Portraits</div>
    	<ul>
    		<li>Raske Penge</li>
    	</ul>
    </ul>
     
    • 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?

  73. DeDav says:

    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?

  74. emily says:

    Thank your tutorial.
    but my menu can’t expand.
    it will close very fast.
    can you help me?

    • emily says:

      i refresh and it’ work.
      it’s fine :D

  75. Russell Weil says:

    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.

    • Ben says:

      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>
      
  76. ammar says:

    Thank your tutorial

    How to get the current index value

  77. Lisa says:

    Is there a way to make the menu fully expand if a user has javascript disabled?

  78. SANJU says:

    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 &nbsp; IS FOR THE BUTTON TO BE AT THE END PLEASE DO NOT DELETE -->
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    
    <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"/>&nbsp;&nbsp;&nbsp;Multimedia</p>
    		<div class="menu_body">
    		<a href="#"><img src="images/pending.png" width="25" height="25" align="absmiddle"/>&nbsp;&nbsp;Pending</a>
             <a href="#"><img src="images/onprocess.png" width="25" height="25" align="absmiddle"/>&nbsp;&nbsp;Onprocess</a>
             <a href="#"><img src="images/finish.png" width="25" height="25" align="absmiddle"/>&nbsp;&nbsp;Finished</a>	
    		</div>
    		<p class="menu_head"><img src="images/copyright.png" width="29" height="28" align="absmiddle"/>&nbsp;&nbsp;&nbsp;Copyright</p>
    		<div class="menu_body">
    			<a href="#"><img src="images/pending.png" width="25" height="25" align="absmiddle"/>&nbsp;&nbsp;Pending</a>
             <a href="#"><img src="images/onprocess.png" width="25" height="25" align="absmiddle"/>&nbsp;&nbsp;Onprocess</a>
             <a href="#"><img src="images/finish.png" width="25" height="25" align="absmiddle"/>&nbsp;&nbsp;Finished</a>	
    		</div>
    		<p class="menu_head"><img src="images/graphics.png" width="29" height="28" align="absmiddle"/>&nbsp;&nbsp;&nbsp;Graphics</p>
    		<div class="menu_body">
             <a href="#"><img src="images/pending.png" width="25" height="25" align="absmiddle"/>&nbsp;&nbsp;Pending</a>
             <a href="#"><img src="images/onprocess.png" width="25" height="25" align="absmiddle"/>&nbsp;&nbsp;Onprocess</a>
             <a href="#"><img src="images/finish.png" width="25" height="25" align="absmiddle"/>&nbsp;&nbsp;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> [email protected]</b>
    <br/><br/>
    </div>
    </div>
    </center>
    </body>
    </html>
    
  79. renren says:

    hi!! it posible to add Active state in these accordion? reply is great help.

  80. Lohith says:

    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

  81. Koustav Ghosh says:

    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?

  82. abhijeet says:

    Wow ! Simple yet effective. Thanks man !

  83. Uttam Padukone says:

    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?

  84. Arun kR says:

    Really use full ,,,

    Thank you..

  85. Albert de Vries says:

    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.

  86. kiran says:

    How to add up down arrow

    • Shira says:

      I will also enjoy to see that!

  87. Shira says:

    Thanks! really useful to beginners :)

  88. Graham Jackson says:

    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.

  89. 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)

  90. Guuz says:

    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.

    • Casey says:

      I also have the same question as above. Anyone can help?

  91. Maavuz says:

    this is Great!! thanku :)

  92. Donni Didit says:

    This is fantastic! I am a graphic design student and creating a webpage for an assignment. I removed the line:

    $(‘#accordion > ul:eq(0)’).show();

    as someone suggested above but the accordian tab is still open on the page. I’d like all of them to be closed and only open on clicking. Have done a big long search for the answer to no avail. Anyone got a tip?

    Once again, wonderful to find this accordion, it looks great and am rapt was so simple to follow! Yay. Thankyou!

  93. Tracy Vo says:

    Thanks so much for your instruction. Could you please show me how to add it to the Google Site.

    Thank You!

  94. Shubhangi says:

    Thankx for this usefully code

  95. Atish Roy says:

    Thanx man… great work

  96. Gokhale says:

    Viral,
    It was nice tutorial. Is there a way to highlight the tab which is opened, eg, when sports is clicked, it is black with orange text?

    Thanks
    Gokhale

  97. honey says:

    nice and easy example

  98. Rob Maclagan says:

    The second level UL should be inside the LI tags for valid HTML. If you make the HTML valid then it doesn’t work

  99. Super Chinazo Poderoso says:

    My version [

    $("#accordion_" + pstSeccion + " &gt; li").bind('click', function(ev){
    
    				ev.preventDefault();
    				ev.stopPropagation();
    				
    				var lob = $(this);
    				$(this).next('ul').toggle(300, function(){
    					var lboVisible = $(this).is(':visible');
    					if(lboVisible){
    						lob.css({
    							"background-color" : "#a0b47e", "color" : "#FFF"
    							, "background-image" : "url(assets/images/gui/bullet_up.gif)"
    							, "background-repeat" : "no-repeat"
    							, "background-position" : " 4px -2px"
    						});
    					} else {
    						lob.css({
    							"background-color" : "#c6d9e7", "color" : "#000"
    							, "background-image" : "url(assets/images/gui/bullet_down.gif)"
    							, "background-repeat" : "no-repeat"
    							, "background-position" : " 4px 7px"
    						});
    					}
    				});
    				
    			});
    

    ]

  100. Nikhil Jadhav says:

    Hello Pleas help me out….

    instead of this :

     $('#accordion > ul:eq(0)').show(); 

    I want to open a ul whoes li having a class=’active’

    Ex:

    <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 class='active'><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>  

    here i want make “Technology” menu visible

  101. Nilesh says:

    Thanks, it work Gr8 for me

  102. Larry says:

    Hi, thanks for the tip – the accordian works, but my entire screen scrolls, when an item in my menu is clicked. Please tell me how I can prevent this.

    Thanks in advance.

  103. more says:

    I am really thankful to the owner of this web site who
    has shared this impressive article at here.

  104. rick says:

    It works fantastic… it’s a great tutorial BUT — It won’t validate in HTML Validator.

    The error is in the layout of my menu
    “Element ul not allowed as child of element ul in this context. ”

    Any advice?
    Thanks,
    Rick

  105. Sasha says:

    Thanks, but this is not valid because if you watch source you will find:

    <li>....</li>
      <ul>
        <li>...</li>
      </ul>
    <li>...</li>
    

    HTML want

    <li>.first level..
      <ul>
         <li>..next level</li>
      </ul>
    </li>
    

    Thanks, and sorry for this comment.
    Regards.

  106. Kelvin Yip says:

    Great tutorial but I have one question. I want to make it so no menu items show when the page first loads. I took out this line:

    $(‘#accordion ul:eq(0)’).show();

    but the first menu item still shows by default. Can you help me please?

  107. nishant says:

    this accordion is stupid, because it will not work an li does not have any ul. or subcategory.

  108. Shika93 says:

    Nice work! Can I keep open categories when I click on another one? Because like this, every time you click on a closed category when another one is open, that one is closed.

  109. Dulce Maria says:

    I love your work but I have a question as to the title of the main menus are at the center

  110. Silvia says:

    Hello everyone,
    I’ve a problem with the menu in firefox.
    This is how I see it: http://www.itattitude.com/wp-content/uploads/2015/03/menu.jpg
    Please anyone know why?
    The menu is perfect in Chrome and IE.
    Thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *