jQuery vertical hover accordion

Question

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!

Answer 1

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

Answer 2

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.

Answer 3

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?

Answer 4

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" });