8 Amazing jQuery Accordions

by Alex Denning. 39 Comments -

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.

Comments (39) - Leave yours

  1. Todd Parker said:

    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. Alex Denning said:

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

  3. smashill said:

    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.

  4. Stu said:

    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! :-)

  5. Green Investments said:

    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.

  6. seks said:

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

  7. Marco said:

    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

  8. Samoj Bhattarai said:

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!