HoverAccordion

 
 

Do the Accordion like it's 2008

 
 

A long while back, I created a small jQuery Plugin called "HoverAccordion" - basically your ordinary accordion, but with a twist: users don't have to click to open one item, they just move the mouse over it. In the touch era this seems out of date, and it is, but since the script appears in a number Accordion Halls of Fame (yes, those exist), I decided to include it here.

Yet Another Accordion Script

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.

Download

HoverAccordion Script and Example Code (.zip)

Usage:

This plugin requires an unordered list with two levels.

    
<ul id="identifier">
   <li><a href="#">Item 1</a>
      <ul>
           <li>Subitem 1a</li>
      </ul>
   </li>
   <li><a href="#">Item 2</a>
      <ul>
        <li>Subitem 2a</li>
      </ul>
   </li>
</ul>

To use the plugin with the list, call it by referencing the id of the tag (or a class, for that matter).

 $(document).ready(function(){ 
    $('#identifier).hoverAccordion(); 
 }); 

 

The CSS for the list should leave all subitem open so its contents remain accessible if JavaScript is disabled in the browser.

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.

 $(document).ready(function(){ 
    $('#example1').hoverAccordion({ 
         keepHeight : true
   }); 
 }); 

 

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 "true".

Example #2 - Regular Accordion

This time, we'll set custom options.

 $(document).ready(function(){ 
    $('#example2').hoverAccordion({ 
       keepHeight: true, 
       activateItem: 3, 
       speed: 'fast' 
    }); 
 }); 
  • Item 1
    • Content #1 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  • Item 2
    • Content #2 - At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  • Item 3
    • Content #3 - Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  • Item 4
    • Content #4 - Vet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum. Vet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum.

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).

Links and Credits

Martha Ruszkowski translated this page to Belorussian right here and Dimitar Teykiyski contributed a Bulgarian translation, courtesy of Medgid team. Thanks to Eugene R for pointing out on how to most easily implement a hover detection.

blog comments powered by Disqus