8 Amazing jQuery Accordions

by Alex Denning.

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.

Source

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.

Source

jQuery UI Accordion


Accordions can be used very effectively for navigation, as these next three examples show. This example opens on hover.

Source

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.

Source

Accordion menu using jQuery


This final navigation example has two options – open on mouse-over or click.

Source

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.

Source

Simple horizontal jQuery accordion


A slightly simpler horizontal accordion that has a number of customizable options.

Source

HoverAccordion jQuery Plugin

An Apple.com like vertical accordion that opens on hover. Would look good on your sidebar.

Source

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.

CWC Special Deal!

Get one year of quality hosting + domain from A Small Orange for only $40 with our exclusive deal!

Featured WordPress Theme

Kara - Simple Portfolio Wordpress Theme

  • 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. 🙂

  • Todd Parker

    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?

  • Pingback: Daily Links | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?()

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

  • Stu

    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

  • Pingback: The Ultimate Guide To JavaScript in Web Design | AddyOsmani.com | Where Web Businesses Grow()

  • Great tutorial. Many thanks!

  • Damn After a long time I come to know that my accordion is also in this amazing list…thanks for inclusion…

  • Samoj Bhattarai

    All the accordions are really nice but can anyone tell me if there is a possible accordion which can retain selected tab when new page is opened.

  • Nice sets of JQuery Accordions!

    Thanks

  • number 2 not work why?

  • Thanks for a good collection of plug-ins. I chose the plugin jQuery UI Accordion.

  • Great collection of jquery accordions, the hover intent one is super cool!