Wednesday, April 15th, 2009

Horizontal Accordion 2.0 for jQuery

Category: jQuery, Plugins, UI

<p>Alexander Graef wrote in to tell us about the excellent Horizontal Accordion jQuery plug-in, which takes an unordered list:

  1. <ul class="test">
  2.   <li><div class="handle"><img src='images/title1.png'/></div><img src='images/image_test.gif' align='left'/>
  3.     <h3>Content 1</h3>
  4.     <p>...</p>
  5.   </li>
  6.   <li><div class="handle"><img src='images/title2.png'/></div><img src='images/image_test.gif' align='left'/>
  7.     <h3>Content 2</h3>
  8.     <p>...</p>
  9.   </li>
  10.   <li><div class="handle"><img src='images/title3.png'/></div><img src='images/image_test.gif' align='left'/>
  11.     <h3>Content 3</h3>
  12.     <p>...</p>
  13.   </li>
  14.   <li><div class="handle"><img src='images/title4.png'/></div><img src='images/image_test.gif' align='left'/>
  15.     <h3>Content 4</h3>
  16.     <p>...</p>
  17.   </li>
  18. </ul>

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:

Posted by Ben Galbraith at 8:06 am
10 Comments

++++-
4 rating from 11 votes

10 Comments »

Comments feed TrackBack URI

@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 option. Even you seem to have problems.

Comment by Aimos — April 15, 2009

Impressive stuff! :)

Comment by andysky — April 15, 2009

Fails in my book since it does not allow for keyboard navigation. Not every person in this world uses a mouse.

Comment by epascarello — April 15, 2009

Hi,
well this is a first alpha release and keyboard navigation is on the todo list :)

Cheers
Alexander

Comment by portalzine — April 15, 2009

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.

Comment by okonomiyaki3000 — April 15, 2009

there are dojo based horizontal accordion widget in action at http://www.thinkfree.com/

Comment by iolothebard — April 15, 2009

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

Comment by MatsSvensson — April 20, 2009

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

Comment by evansharp — October 2, 2009

//edit: I suppose Alexander Graef should get the credit, not Ben. Sorry mate.

Comment by evansharp — October 2, 2009

I’m aware that MS IE9 is still in beta,but though you would like to know that this does some strange things.

Comment by Leonidas1 — January 19, 2011

Leave a comment

You must be logged in to post a comment.