8 Amazing jQuery Accordions
You can never underestimate how useful an accordion can be – use them for menus, featured content slideshows, squeezing more content into your sidebar; the list goes on! Making your life easier, I’ve put together a list of eight brilliant jQuery accordions that you could use on your site.
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.
30 Comments + Trackbacks
2.21.2009
I’ve used the HoverAccordion plugin before, but Ilike the look of some of those horizontal accordions.
Thanks for sharing!
2.22.2009
Was looking at those sites this morning, who knew we were both thinking about accordions.
2.22.2009
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?
2.23.2009
I just recently started using JQuery. Thanks for the great examples.
2.23.2009
Just amazing the things you can do with jQuery. I’ll pass it on…
2.24.2009
JQuery looks great, thanks for sharing it, It sure adds nice features to a site
2.24.2009
Haven’t used before, but am going to look into it based on everyone highly recommending it here.
Thanks!
2.24.2009
@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!
2.24.2009
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.
2.24.2009
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.
2.26.2009
I have just recently started using jQuery with my website and I feel like my bounce rate is going down. I highly recommend it!
2.26.2009
Thanks for the great examples. It very helped me.
3.1.2009
Thats a nice one. Thanks for sharing this tip!
3.1.2009
Jquery in astonishing action once again. Great examples. Thanks for sharing.
3.2.2009
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.
3.2.2009
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.
3.5.2009
This are great examples. It really helped me to find a solution for a webpage. I choosed the xBox model. Thanks for sharing.
3.9.2009
What I have been wondering if that xbox design could lead to legal problems? At least if you use it with the same colors.
3.19.2009
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!
3.19.2009
Nice one, I really want to use accordions in my next project.
4.1.2009
I like accordions some times but other times they get used wrong and look bad and cut down on usability. Thanks for the list
4.8.2009
Haven’t used before, but am going to look into it based on everyone highly recommending it here.
Thanks!
4.9.2009
Fantastic. thanks for shareing.
4.24.2009
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.
5.2.2009
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
5.13.2009
Xbox is my favourite one. Could use that one on my sites one day. Thanks for sharing these examples with us.
7.10.2009
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..
9.5.2009
nice list , I really like the apple inspired vertical accordion.
10.24.2009
jQuery UI Accordion is great