Simple JQuery Accordion menu

This is a simple Accordion menu done in JQuery. Links with subitems under them will expand the submenu when clicked. Items that don't have subitems are normal links. (example link to Marco's blog). The menu initialises with the first submenu expanded.

If this code snippet is useful for you feel free to download it and use it on your (non commercial) website.

This snipped is discussed on my blog in this post.

1: Standard accordion menu

By default, the menu will launch in collapsed state and function like an accordion.

2: Accordion with first submenu expanded at page load

Same as the first example but with the first submenu expanded when the page loads. This is achieved by adding a CSS class expandfirst to the unordered list.

3: Non-accordion (standard expandable menu)

This is a standard expandable menu without accordion functionality. This is achieved by adding a CSS class named noaccordion to the unordered list.

4: Collapsible accordion with first item expanded at page load

This menu works like an accordion when one menu item is already expanded but will collapse completely when the expanded item is clicked. Additionally it has the first item expanded at page load. This is achieved by adding a CSS class named collapsible and another CSS class named expandfirst like in example 2.

Source

  1. function initMenu() {
  2. $('#menu ul').hide();
  3. $('#menu ul:first').show();
  4. $('#menu li a').click(
  5. function() {
  6. var checkElement = $(this).next();
  7. if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
  8. return false;
  9. }
  10. if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
  11. $('#menu ul:visible').slideUp('normal');
  12. checkElement.slideDown('normal');
  13. return false;
  14. }
  15. }
  16. );
  17. }
  18. $(document).ready(function() {initMenu();});

Collapsing menu

Just want it as a simple collapsing / uncollapsing menu? Find it here. Even less code.

Download

Download everything in a zip file