Dynamic Drive Accordion
A highly customizable accordion that opens on hover or click. This sort of accordion looks best in a sidebar.
Design Reviver Horizontal Accordion
A very nice horizontal accordion – when you hover over the image, a caption appears. Useful for showing off a couple of featured posts if you’re tight for space.
jQuery UI Accordion
Accordions can be used very effectively for navigation, as these next three examples show. This example opens on hover.
Simple jQuery Accordion Menu
Another accordion that can be used for navigation. There are lots of options (not just navigation), so visit the source to see them all. This navigation example has expandable submenus.
Accordion menu using jQuery
This final navigation example has two options – open on mouse-over or click.
Xbox 360-like horizontal jQuery accordion
An Xbox-like horizontal accordion that would look really good being used as a featured content slideshow – an alternative to the JonDesign one that everyone uses.
Simple horizontal jQuery accordion
A slightly simpler horizontal accordion that has a number of customizable options.
HoverAccordion jQuery Plugin
An Apple.com like vertical accordion that opens on hover. Would look good on your sidebar.
Missed something? Leave a comment with the details of your accordion!
This guest post was written by Alex Denning – take a moment to visit his sites – Nometet.com and here GreenGrassGames.com.
If you’re on Twitter, then you can follow Alex here.
My name is Jean-Baptiste Jung and I'm the man behind Cats Who Code. I started to use the Internet back in 1998 and started to create websites three years laters in 2001.
30 Comments
I’ve used the HoverAccordion plugin before, but Ilike the look of some of those horizontal accordions.
Thanks for sharing!
Was looking at those sites this morning, who knew we were both thinking about accordions.
You should also check out the official jQuery UI accordion. It is very mature, well-documented and is skinnable with ThemeRoller
http://jqueryui.com/demos/accordion/
Was this left off the list on purpose?
I just recently started using JQuery. Thanks for the great examples.
Just amazing the things you can do with jQuery. I’ll pass it on…
JQuery looks great, thanks for sharing it, It sure adds nice features to a site
Haven’t used before, but am going to look into it based on everyone highly recommending it here.
Thanks!
@Todd – er no. Just didn’t see it! Thanks for sharing it though.
Everyone else – not many of you guys have been sharing your favourite accordions – comment below!
I’m really having problem with this Accordion thing since I’m not that really good in programing but this really helps thanks a lot.
jQuery is a very valuable tool that helps add more content. I like to use it to help my users have the freedom to look into other things we offer.
I have just recently started using jQuery with my website and I feel like my bounce rate is going down. I highly recommend it!
Thanks for the great examples. It very helped me.
Thats a nice one. Thanks for sharing this tip!
Jquery in astonishing action once again. Great examples. Thanks for sharing.
To be honest I hate jquery, I am one of those few people who still like security best and use noscript. It’s pretty annoying to see more and more wordpress themes depending on nifty shifty tools. It may enhance the users experience, but I think very often less is more
Or at least you should code a site that works with and without scripts.
Horizontal accordions are extremely unintuitive however I realy liked the x-box one. But I don’t know if the idea would be clear enough for every guest to use it efficiently.
This are great examples. It really helped me to find a solution for a webpage. I choosed the xBox model. Thanks for sharing.
What I have been wondering if that xbox design could lead to legal problems? At least if you use it with the same colors.
I love the way this can be done in jQuery.
And the best thing is that as they’re just unordered lists – they’re easily crawlable by search engine spiders!
Nice one, I really want to use accordions in my next project.
I like accordions some times but other times they get used wrong and look bad and cut down on usability. Thanks for the list
Haven’t used before, but am going to look into it based on everyone highly recommending it here.
Thanks!
Fantastic. thanks for shareing.
JQuery is awesome, but the ones posted here seem a little outdated for the web 2.0 style (reflections, dropshadows, rounded corners, etc.) I guess just a little editing of the images needs to be done to make them fit in nicely.
this is nice post. And its good to use these kind of plug-ins. Thanks for sharing it publicly. Please keep sharing more these kind of plug-ins
Xbox is my favourite one. Could use that one on my sites one day. Thanks for sharing these examples with us.
but the ones posted here seem a little outdated for the web 2.0 style (reflections, dropshadows, rounded corners, etc.) I guess just a little editing of the images needs to be done to..
nice list , I really like the apple inspired vertical accordion.
jQuery UI Accordion is great
Hi, thanks so much for mentioning my Simple JQuery Accordion. I have released an updated version. Maybe you’ll want to update the link. The new version is here:
http://www.i-marco.nl/weblog/archive/2010/02/27/yup_yet_another_jquery_accordi
Thanks,
Marco
One Trackback
[...] 8 Amazing jQuery Accordions Some Accordion Scripts you might like for your next project! [...]