General Information

This is not meant to be a tutorial. I made this page to show that fx.Accordion can be used in many different ways with a little help from CSS.

Since the code for this page is really kind of long and crazy looking, I've created seperate download for each accordion. All downloads include images (where applicable) and scripts.

Things to Remember

All Accordions
All the same rules and restrictions apply such as no borders, backgrounds, or padding on the <div> that does the stretching.

Horizontal Accordion
In order for the horizontal accordion to work correctly you have set width: true, height: true inside fx.Accordion. Also, whatever <div> container the accordion is placed in, you SHOULD set overflow: hidden; in the CSS. If you don't, each time you click one of the stretches it creates a vertical scrollbar temporarily that'll make the accordion look as though is jerking to the left and back.

Two Column Accordion
This was the only one that I couldn't get to start open when the page loads. I suspect it has something to do with the way the <div>'s are placed. But that's just a guess. If anyone figures out how to fix this, I'd love to hear about it.

I FIXED IT!
download the new version now

Examples

Samples can be found at horizontal, tab style, and two columns.