Making accordion menu using jquery

Last time, I’ve shown how to create accordion using jquery. But, In this post I’ll show you how can you create fancy accordion menu using jQuery. In this post, you’ll see two examples of accordion. First menu’s visibility get’s toggled on clicking on the header while the another menu’s visibility get’s toogled when mouse is moved over it.

Live Demo of accordion menu using jQuery

HTML structure for accordion menu using jQuery

<div id="firstpane" class="menu_list">
  <p class="menu_head">Header-1</p>
    <div class="menu_body">
	<a href="#">Link-1</a>
    </div>
  <p class="menu_head">Header-2</p>
    <div class="menu_body">
	<a href="#">Link-1</a>
    </div>
  <p class="menu_head">Header-3</p>
    <div class="menu_body">
        <a href="#">Link-1</a>
   </div>
</div>

As you can see the structure, the elements of the menu are inside the div with class “menu_list”. And each blocks of menu contains the header with class “menu_head” and div with class “menu_body”. Note that, there is another pane with the id “secondpane” whose code is similar as above and not posted above.

CSS code for accordion menu using jQuery

.menu_list {
	width: 150px;
}
.menu_head {
	padding: 5px 10px;
	cursor: pointer;
	position: relative;
	margin:1px;
       font-weight:bold;
       background: #eef4d3 url(left.png) center right no-repeat;
}
.menu_body {
	display:none;
}
.menu_body a {
  display:block;
  color:#006699;
  background-color:#EFEFEF;
  padding-left:10px;
  font-weight:bold;
  text-decoration:none;
}
.menu_body a:hover {
  color: #000000;
  text-decoration:underline;
}

I’m not a good color chooser so please forgive me for the color combinations. Above CSS code is straight forward and you can change is according to your need. Note that, the display property in “menu_body” is set to “hidden” so that the menu links are hidden when the page is loaded. Furthermore, the display property in the link inside “menu_body” class is set to “block” so that each menu appears in new line. You can see a image in the “menu_head” class, this is the image which gets changes with the visibility of the menu item in each menu’s head.

I’ve used the images from sweetie icon pack, you can download the other beautiful icon from the their website.

Javascript Code using jQuery

Now finally look at the JavaScript code to accomplish this, first of we need to import the jQuery library

<script type="text/javascript" language="javascript" src="jquery.js"></script>

And, then we need to write few lines of simple code in jQuery to do this, let’s look at the jquery code of the first accordion menu whose visibility gets toggled on the mouse click event on each header,

//slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
$("#firstpane p.menu_head").click(function()
{
    $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
    $(this).siblings().css({backgroundImage:"url(left.png)"});
});

When the paragraph with class “menu_head” inside the element with the id “firstpane” gets clicked, the background image of it changed to down arrow. And then, next div with class “menu_body” gets slided in toggling it’s visibility. Furthermore, the other sibling’s div with class “menu_body” gets slided up. And then, the background image of the other sibling’s of “p” is changed to left arrow. Now look at the code of the accordion menu under mouse over effect.

//slides the element with class "menu_body" when mouse is over the paragraph
$("#secondpane p.menu_head").mouseover(function()
{
   $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
   $(this).siblings().css({backgroundImage:"url(left.png)"});
});

This code is preety similar to the above code but the difference is only that this accordion menu works on the mouse over effect whereas the above accordion menu works on the mouse click event.

Download Source Code

If you want to learn more about jQuery then you can check the following books and buy them.I really recommend the book “jQuery in Action” for starting your way for jQuery.

Learning Jquery: Better Interaction Design and Web Development with Simple JavaScript Techniques


Jquery in Action

202 thoughts on “Making accordion menu using jquery

  1. redsonic

    @Roshan thanks for this great menu
    @Omar
    I found a solution to keep a control on the menu so that when you follow a link the menu stays open, quickly this is what I did:

    On the page that will be opened by the first link I put something like this :

    On the jquery function I added this lines (at the beginning) :
    var num=$(“span.keep_open”).attr(“id”);
    $(‘.menu_body:eq(‘ + num + ‘)’).show();

    That is all.

    For the page that will be opened by the second link, I have written :

    etc …
    No ajax, no pain!

  2. redsonic

    the two missing lines (I don’t know why they don’t appear)
    *span class=”keep_open” id=”0″> </span*

    Hope it works now.

  3. greenchili

    I love this menu – it’s great! One question – I need to make the Header-1, Header-2 and Header-3 clickable links. I tried to add a style to the css, but when I apply the new link style to them, they don’t function to open the accordians. Any suggestions?

  4. ben

    good!

    from china guangzhou

  5. Thank you … this tutorial to menu has me very helped.

  6. jane

    good one

  7. Ben McOsker

    I am trying to get the navigation working so that the accordian is open when a user is in that directory. I am using a $_SERVER[‘REQUEST_URI’]; call in PHP and parsing the array to give me a directory,.

    I am new to jQuery… where would I add the $(”.menu_body:eq(” + menu_id + “)”).show(); ?
    Do I add this after the .ready(function($)?

    Are there any changes to jQuery.js?

    Best,
    Ben McOsker

  8. Works perfectly fine! So simple that I could also tweak it.. :)

  9. If I were to have to train a new developer how to do web work, I would head straight to JQuery. I would use JQuery as a JavaScript learning gateway drug. By the time the developer is done learning JQuery, then learning the rest of JavaScript would be much easier. Plus, they are already effective at producing code. I see that as a double bonus.

  10. Alex W

    Great script!!

    I’m currently trying to make a way for the menu to collapse when the user mouse’s out. This command does that:
    $(“#secondpane p.menu_head”).mouseout( function() {
    $(this).css({backgroundImage:”url(left.png)”}).siblings(“div.menu_body”).slideUp(“slow”);
    });

    The problem I am having is keeping the menu open when you want to hover over a link. Anyone have any ideas? Thanks in advance for any replies.

  11. Tim Roberts

    Roshan, thanks for this great tutorial.

    Can anyone tell me how to make this menu expand from the bottom up instead of from the top down? Much obliged.

    Tim

  12. Chris

    Is there a way to change the header image according to menu state?

    What I mean is that when I click the same menu I opened before but this time to close it (I don’t want to click another menu to close it), the correct image to show is left.png. Instead now when you click a menu whether it’s closed or opened there’s always the down.png image shown.

  13. oooooh… all the aspx is filtered out… but i can mail it if requested

  14. kristianDavid

    first off, love this menu! thanks a lot for providing it.

    secondly, how do i make the header a link itself? in my navigation, the headers are pages as well that i need to link to.

    thanks in advance.

  15. Leonardo

    Roshan, first of all thank you a lot for the tutorial, it is great! Then, I would like to know something that I will be grateful if you could help me with. It is rather easy I think. I want to change the arrow from down to left when I click on an opened header. Right now the down arrow stays shown. Thanks in advance.

  16. Ambrish

    thats a superb piece of code..
    But what if i want a widget instead of accordion.
    What changes do i need to make…

  17. Chris

    Hi Roshan,

    I have the same question as kristianDavid, how do you make the header for the different section links aswell?

    Thanks

  18. chris

    How do you fire another jquery event, by clicking on a link, inside the accordion? Say i wanted a link that would pop up a dialog. Im new to jquery, so this would be a big help. I cant find something that does this, anywhere.

    Thanks for the great tutorial

  19. Great! And helpful! Thanks!

  20. Thanks steve

  21. I like this menu.

    Thanks Roshan.

  22. Steve

    This script is great
    @redsonic
    Wil you tell me, how you exactly do that?
    Because I`ve tried everithing possible, but nothing happend.
    If you want, you may send me the script at my mai.

  23. very helpful.. thank you.

  24. Hi, this is a wonderful script!
    But wait, what if I want not to show the arrows in menu headers that hasn’t children? is that possible? I’ve tried and turned me mad :)

  25. Wes

    I wrote a nice little tutorial with a custom accordion specifically for wordpress vertical accordion menu. It can be found here http://www.wessray.com/jquery/jquery-accordion-for-wordpress/

  26. Great Tutorial. Thanks

  27. Thanks, this JQUERY-Tutorial has me very helped.

  28. @jeremy I found a solution to the accessibility problem. Use a tag and inside put a link to a nojavascript.css file. In the css file, add this
    .menu_body {
    display:inline !important;
    }
    This will make the navigation visible to those without javascript.

  29. Sorry, comments stripped my tag, use a noscript tag and put the css link in that.

  30. Shiva

    Hello, in IE 8, playing with the accordion causes the margins in between the headers to dissapear. Has anyone came across a fix for this?

    Thanks,
    Shiva

  31. webdev

    How can a person update a jQuery menu from a central file (like XML for example) if the html DIV structure must be pasted from page to page? How to you update the menu if you have, for example 50 pages, without having to go page by page and not being able to use Server Side includes?

  32. very useful!
    ths

  33. thx collect it to
    ajax.wespai.com

  34. Hi guys,

    First of all, thank you Roshan for this script! But I realy need your or somebody’s else help. I’m making a website (wich is not ready yet), and I’m stuck with the open menu on load page thing, where you have to add this code:

    $j(’.menu_body:eq(0)’).show();

    See my website: http://www.loft238.nl/DGR/index.html

    I did that for the index page just to see if it works, and I tried almost everything.. I got a deadline in 5 days so I hope somebody of you can give me a solution.

    Many thanks in advance!

    Jonathan

  35. Thank you for a great script. We are planning to implement this on our website.

  36. michel

    Hello,

    this menu is very good tool. For IE, FF, Opera.
    BUT, not on Safari (windows and mac) : impossible to open the menu if configurated on “clicking” and when completely closed.
    Do you have a solution ?

  37. vad

    Hi Roshan,
    Great script! I use it for my friend’s site.
    I faced a minor trouble at Mozila only – can’t customize hover color of head links by editing css. it works ok with body links, but doesn’t with head ones.
    I managed to solve that with adding onmouseover=\”javascript:this.style.color=’#FFFF99’\” onmouseout=\”javascript:this.style.color=’#FFFFFF’\” (php notation). Is it somehow assosiated with vs at original menu items section?
    Thanks

  38. michel

    « BUT, not on Safari (windows and mac) : impossible to open the menu if configurated on “clicking” and when completely closed. »
    Sorry for disturbing : all is OK now. The menu works perfectly, in Safari too !

  39. Simply excellent , it helps a lot while programming with Jquery. i got the learning Jquery e-books from some rapid sites, there are really very invaluable info on this language. . . . .Thanks for sharing

  40. Praveen

    Hi,
    Thanks for the script. It works. What should i do to make first menu expand by default?

    Please help !

  41. Hi,

    Very well Explained. Its working. Thanks bro. Looking forward to new posts on menu styles.

    Thanks,
    Rakshit.

  42. Hello Praveen,

    If you would like to open first menu open than you have to write style=”display:block;” sentence in First Div in HTML.

    This will overwrite the CSS style of class display:none for first div.

    Once you will add inline style in first div, it will be visible when page loads.

    Thanks.

  43. stephen

    Dear Roshan,

    Thank you for your great effort, it is very helpful to do our things easy.

    Could you guide me to edit the code for mouse over accordion to collapse if I move the mouse out of the menu.

    Thank you and looking forward.

    Stephen

  44. i think we should change second command from :
    $(this).siblings().css({backgroundImage:”url(images/newsGroup_hdr.png)”});

    to this:
    $(this).siblings(“menu_head”).css({backgroundImage:”url(images/newsGroup_hdr.png)”});

  45. The script is very good. But it has a problem. let me take u to scenario. U have clicked over a menu, it shows u all the sub menus. Now when u click over a menu which is not having any sub menu then when the opened menu regain its size but the line separating the menus get merge at one place. Can u please tell how can come over this problem.
    Thanks in advance.
    NayeemKhan

  46. Thanks! this is exactly what I was looking for.
    A small contribution to this code: you can add a toggle function and an ID to the element to manually collapse a specific menu, for example with a button. This not only allows for more control but also provides a way to expand a specific menu acording to the current page and even generating a java script with PHP…

    Add this inside the section:
    function toggle(pID){
    $(document.getElementById(pID)).css({backgroundImage:”url(down.png)”}).next(“div.menu_body”).slideToggle(300).siblings(“div.menu_body”).slideUp(“slow”);
    $(document.getElementById(pID)).siblings().css({backgroundImage:”url(left.png)”});
    }

    And ad an ID to the tag
    Header-1

    And a button to collapse the menu manually

    Cheers!

  47. thank you ^^

  48. excellent information, thank you thanks for the inspiration!

  49. hi Roshan
    i am using accordian menu in my site when page is reloaded it is active parant menu is closed
    i want to one link open at a time

  50. Tim

    Hey, I am a complete rookie at jquery and I need some help. I have implemented the script and it is working great, but I am wondering if you can combined the two different menu styles. I would like to click to open the menu but I want it to close on two different scenarios…rollout/rolloff of menu and when you click on any of the menu_body links. Can anyone help me out?

Comments are closed.