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.

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