This is yet another accordion script, except you don’t have to click to open one item, you just move your mouse over it.

I actually made the plugin to serve as a menu, but it could also work as a regular accordion for displaying different types of content within a page.

It was important to me to require as little customization of the list code in order for the plugin to work, i.e. I didn’t want to have to manually add classes etc. to header or active elements, as the structure of the list already contains all the information needed.

This plugin was inspired by the Accordion menus on the Apple Mac website as well as Jörn Zaefferer’s Accordion plugin.

Thanks to Eugene R for pointing out on how to most easily implement a hover detection.

Usage:

Example #1 – Menu

Just a plain unordered list with the id ‘example1′ in the

tag. Each item contains a link to the same page, illustrating the autoactivate feature, where the item and according subitems are opened and highlighted automatically, if the link is identical with the current page. This is a default setting. See Example #2 for a regular accordion without links on the main items.

For the purpose of this example, I added different numbers of subitems, in order to visualize how the height of the largest submenu determines how far each submenu opens up, so that there is little movement below. This can be turned off by setting the “keepheight” option to “false”.
Example #2 – Regular Accordion

This time, we’ll set custom options to emulate the accordion from the Apple website.

For this example, a few extra classes are attached to the first and last items, so that the background images change according to their position (note the rounded corners).

Demo: http://berndmatzner.de/jquery/hoveraccordion/
Download: http://berndmatzner.de/jquery/hoveraccordion/jquery.hoveraccordion.min.js
Source: http://berndmatzner.de/jquery/hoveraccordion/

Related Listings:

1. jQuery hover accordion This is yet another accordion script, except you don’t have...
2. Accordion Plugin using Jquery Script This plugin is now part of jQuery UI and this...
3. Moo FX Accordion – Old The Accordion flavors are : horizontal | tabs | two...
4. Super simple javascript accordion jQuery plugin I’ve been working professionally with the web since 2002. Back...
5. Drag and Drop Accordion Script The Accordion widget and its InfoPanel are components that can...

Do you like this post?

Email: