how to create a sub menu accordian using api

Question

I'm trying to develop an accordian sub menu, See image below. I've tried using the menu block module but i've found it a litte tricky to format. I'm wondering how can get an array of menu items base on a parent. So, say the submenu below were all children of /aboutus/ how would the php look? I'm using drupal 7

Answer 1

Try the jQuery Menu module. It was somewhat easy to style -- all I had to add was CSS.

Jquery menu uses simple, cross browser compatible jquery to transform your multilevel menus into click and expand menus. Yes this module is similar to dhtml menus and active menus, but it is different in a couple of key ways.

1. Unlike dhtml menus (which requires you to click twice on a link to actually follow an expanded link) Jquery menus separates the link from the expanding mechanism (there is a small plus symbol that you click instead to expand the menu). This makes for a more natural navigation.
2. Unlike active menus, which makes ajax calls to fill in the lower level menus when you click the plus symbol, Jquery menu creates the menu in full on the initial page load. I personally have used active menus for several months and have found that those ajax calls sometimes fail, and are not as stable as jquery.
3. Unlike Active menus which transforms all menus into active menus once the module is turned on, Jquery menu only creates a jquery block for the menus that you specify. To chose which menus you want to be active you just have to visit the admin page at 'admin/settings/jquerymenu' .
4. Jquery menu is easily themable. Since the jquery menu blocks only use a small number of styles, and don’t use the default list styles, overriding it with your own css is easy. Also the important display elements are contained in themable functions so you can tinker with the layout if you like.

Answer 2

More reasonable is to add few line of js (e.g from my project):

      var allexpands = $('.pane-menu-menu-departments .menu li.expanded ul.menu').hide();    
  $('.pane-menu-menu-departments .menu li.expanded > a').click(function() {        
    $this = $(this);
    $target =  $this.parent().find('ul');
    if(!$target.hasClass('active')){
      allexpands.removeClass('active').slideUp();
      $target.addClass('active').slideDown();
    }      
    return false;
  });