Wednesday, April 15th, 2009
Horizontal Accordion 2.0 for jQuery
<p>Alexander Graef wrote in to tell us about the excellent Horizontal Accordion jQuery plug-in, which takes an unordered list:and transforms it into this:
It's a complete re-write of the old plug-in and works on Firefox, IE, and Safari. Here's the feature list:
* No dependencies
* Optional use of easing plugin (still some work needed)
* Close and open content one after the other
* Close and open at the same time
* Choose trigger (mouseover, click ...)
* Easily control through external calls
* Open content on load
* Open content through hash tags in the url (#tab1, #tab2...)
* Position of handle (left, right)
* Mixed handle positions - 2 left , 2 right ...
* Cycle through content by interval
* Events when animations starts and ends
* Hide content until all has been assembled
Check out the demos.
Related Content:
@Ben & Dion: please do something about code display IN your posts AND in the comments. Use SyntaxHighlighter or something. It’s so bad that a simple regEx for > and < is not provided inside the [code] option. Even you seem to have problems.
Impressive stuff! :)
Fails in my book since it does not allow for keyboard navigation. Not every person in this world uses a mouse.
Hi,
well this is a first alpha release and keyboard navigation is on the todo list :)
Cheers
Alexander
Regarding keyboard navigation, does any other accordion support it? I recently use an accordion (Mootools, not that it matters) to break up the parts of a rather complex form but the obvious problem was that tabbing from the last element in one pane to the first in the next was not happening. I came up with a solution that involved putting a transparent checkbox on the toggle to catch focus so I could open the next pane and change the focus before the user noticed anything strange had happened. The trick seemed to be that, if visibility is set to hidden, the checkbox would not receive focus. Opacity: 0 and visibility: visible seemed to work though.
there are dojo based horizontal accordion widget in action at http://www.thinkfree.com/
Looks cool.
But i really hate when sites use this kind of stuff to hide parts of the page.
Inline search doesnt work, you cant link to parts of the page with an anchor, animations slow things down, things fly around when you happen to cross over with the mouse,
Google says the page has what you are looking for, but when you get there you cant see it anywhere because its folded up somewhere.
And so on…
Is so much faster and easier to just to have one page with all the content and then scroll it.
Sorry for pissing in the ajax-partypunch =)
@MatsSvensson:
Actually, most of your complaints are not an issue with this particular plugin; if you read the feature list…
-”Open content through hash tags in the url (#tab1, #tab2…)” = “linking with an anchor” is possible
-”Choose trigger (mouseover, click …)” = things will not “fly around when you happen to cross over with the mouse”
-”Optional use of easing plugin” = things shouldn’t slow down very much, also, this is all pretty light-weight stuff that even mobile connections can handle; junk your P3 box and get a machine that can run a modern browser
-”Open content on load” = inline search should work since the content is loaded in the document
Lastly, are you so spoon-fed by Google that you can’t actually read a page to find what you’re looking for?
I think the plugin is bloody brilliant Ben. Great work.
//edit: I suppose Alexander Graef should get the credit, not Ben. Sorry mate.
I’m aware that MS IE9 is still in beta,but though you would like to know that this does some strange things.