HoverAccordion

Example #1 - Menu

Just a plain unordered list with the id 'example1' in the <ul> 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();
});

 

• Item 1
• Item 2
  • Subitem 2a
  • Subitem 2b
  • Subitem 2c
  • Subitem 2d
  • Subitem 2e
• Item 3
• Item 4
• Item 5
  • Subitem 5a
  • Subitem 5b
  • Subitem 5c
• Item 6
• Item 7
  • Subitem 7a
  • Subitem 7b
  • Subitem 7c
  • Subitem 7d
• Item 8
  • Subitem 8a
  • Subitem 8b
  • Subitem 8c
  • Subitem 8d
  • Subitem 8e
  • Subitem 8f
• Item 9
  • Subitem 9a
  • Subitem 9b
  • Subitem 9c
  • Subitem 9d
  • Subitem 9e

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.

$(document).ready(function(){
   $('#example2').hoverAccordion({
      activateitem: '1',
      speed: 'fast'
   });
});

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

 

 

 

© 2008 - Bernd Matzner