jQuery vertical hover accordion

Hi,

What jQuery plugins exist for a vertical hover accordion? I am looking for a plugin to be used for a menu where:

• sub-menu items will only expand after a second being hovered over (so something that perhaps uses the hoverIntent plugin);
• it can degrade gracefully if Javascript is turned off; and
• will collapse/close any sub-menu item when the mouse moves completely off it.

thank u very much!

From stackoverflow

• You can try jquery UI accordion. It has a lot of options and you can customize it, too.

  Shalan : thanx Ekeko, I'll look into it. I believe its the same one developed by "bassistance.de" I'll look into it more carefully and see how I can tweak it

• I could be wrong, but I think there may be inherent problems with using a mouseover or mouseenter event to control a vertical accordion -- unless you really know what the submenus are going to be like.

  The problem lies in the what-if: you have a long list of items in a submenu, and some short submenus or single menu items that follow below. like this:

  • menu
    • 1
    • 2
      • a
      • b
      • c
      • d
      • e
      • f
    • 3
    • 4
    • 5
      • a
      • b
      • c

  So when you move from #2 to #3, #2 collapses, putting your pointer way down the list. You fire all the mouseover/out or mouseenter/leave events for #3, #4, #5... and maybe move past the whole menu... things can start bouncing around like crazy.

  Maybe the hoverIntent plugin can be made to work, but I think just using the mouse click is a more elegant solution. At least for an abstracted list, that is.

• How does the (Accordion) UI gracefully degrades? It seems that all css is generated by the javascript... Is there a technique other than doubling up css?

  Shalan : ideally, it is supposed to revert to the usual "display:block" for child UL's on mouseover, and "display:none" on mouseout. just like your traditional menus styled and positioned using CSS - that is if your markup is correct, and your CSS is done properly. hope that helps!

• hey take a look to this plugin for Hover Accordion, i was looking for the same effect and I found this. http://berndmatzner.de/jquery/hoveraccordion/

  And this may help to you to make hover with de original accordion of jquery. $("#accordion").accordion({ event: "mouseover" });

  Shalan : woah! cant believe this post is still active :) . I remember tryin this plugin, but had some problems with it - it was a long while back and I've unfortunately forgotten. I do remember that I stuck with the accordion plugin from Jörn Zaefferer and binded it to the hoverIntent function. I found that to work best. IMHO, I agree fully with Christian Studer's first comment in my original post at the top - these become usability nightmares, especially for novice users. If this is for navigation purposes, try looking at alternative ideas. good luck!