Accordion v2.0 but maybe it will be 3.0

What's new in this version

• I modified the CSS to use 'em' instead of 'px' so visually impaired users can resize their browser text size (not zoom) and still be able to use the accordion. Try it using IE's Text Size setting.
  This feature alone is desired by big corporations because they must follow Federal Accessibility laws to avoid prosecution.
• I set the Accordion in this example to a more 'corporate' behavior (height locked in a set position). Basically the content needs to fit in the allotted space. Look at the accordions at http://www.apple.com/support/ and http://www.att.com/ to see what I mean.
• I modified the Javascript to work with the latest Prototype version (1.6.0.3) and the latest version of the Effects.js from Scriptaculous.
• I added a mouseover and a mouseout event listener and incorporated a timeout to 'desensitize' the mouse hover. Try hovering over one of them and see.
• The height, overflow, and floats are set via JavaScript. This allows the content to still be viewable with JavaScript turned off. Lots of users browse with JavaScript turned off.

• This version allows you to click or hover over the accordion. This is helpful for those using a keyboard to navigate.
• To make the accordion clickable, a 'click' event listener was added along side a 'mouseover' listener.
• A delay was added to the mouseover event so each time the mouseover if fired, a timeout is triggered which fires a accordion after the timeout. But if your mouse moves out of the area before this fires, the timeout is cleared. ;)
• Links are needed for the clickable version to work. Good for screen readers...

Oh yeah, just a few options... BAM Horizontal!

Each horizontal menu has a link with hidden text. If you view this in Firefox and press CTRL + SHIFT +S, you'll see that each horizontal bar has a link. But why do you need this? For screen readers. Remember, the corporate world doesn't want to get sued. So they try to cater to every user... including the disabled.

One major issue I found while playing with this accordion script was that certain elements could NOT have a height or margins set. Doing so would cause a 'jerky' or 'snap' effect to happen. This also happens if too much content is squeezed into the space. So, study the css closely...

There are two options for non-js users. Either allow the user to see all the content when their javascript is turned off, or give them links they can follow.

The second option is how I coded this page. If you turn off javascript and reload the page, you'll notice that the accordion is visible but the content doesn't expand. Each of the green bars is still clickable. This would of course assume you have pages to take the user to.