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.

  • http://www.webr.co.uk Web Design Manchester

    I’ve used the HoverAccordion plugin before, but Ilike the look of some of those horizontal accordions.

    Thanks for sharing!

  • http://wpcult.com The Frosty @WPCult

    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?

  • http://www.boatstorageillinois.com/ Bill

    I just recently started using JQuery. Thanks for the great examples.

  • http://www.21stsoft.com seo web developer

    Just amazing the things you can do with jQuery. I’ll pass it on…

  • http://www.zurpit.com Classifieds

    JQuery looks great, thanks for sharing it, It sure adds nice features to a site

  • http://organicgrog.com Grog

    Haven’t used before, but am going to look into it based on everyone highly recommending it here.
    Thanks!

  • http://nometet.com Alex Denning

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

  • http://repsonwheels.com/ Mawe from repsonwheels

    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.

  • http://www.orangesoda.com Small Businesss Internet Marketing

    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.

  • http://www.mailing-lists-direct.com/ direct mail lists

    I have just recently started using jQuery with my website and I feel like my bounce rate is going down. I highly recommend it!

  • http://studentam.net.ua Sergey

    Thanks for the great examples. It very helped me.

  • http://www.peiprofit.com Ben Pei

    Thats a nice one. Thanks for sharing this tip!

  • http://www.0window.com/blog/ Catrin W

    Jquery in astonishing action once again. Great examples. Thanks for sharing.

  • http://smashill.com smashill

    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.

  • http://www.datalab.pl Odzyskiwanie Danych

    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.

  • http://www.meditatiimatematica.ro CristiC

    This are great examples. It really helped me to find a solution for a webpage. I choosed the xBox model. Thanks for sharing.

  • http://smashill.com smashill

    What I have been wondering if that xbox design could lead to legal problems? At least if you use it with the same colors.

  • http://www.cosmedical.ca/ 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! :-)

  • http://forthelose.org Wordpress Themes

    Nice one, I really want to use accordions in my next project.

  • http://www.mfinch.ca/blog/ Online Marketing Blog

    I like accordions some times but other times they get used wrong and look bad and cut down on usability. Thanks for the list

  • http://bedavam.net Bedava indir

    Haven’t used before, but am going to look into it based on everyone highly recommending it here.
    Thanks!

  • http://www.solarpowertoptips.com solar power

    Fantastic. thanks for shareing.

  • http://killerinvestments.net/category/green-investing/ Green Investments

    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.

  • http://www.easigo.co.uk Motorbike accident claims

    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

  • http://hannaowen.com Hanna

    Xbox is my favourite one. Could use that one on my sites one day. Thanks for sharing these examples with us.

  • http://www.sehvetli.com seks

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

  • http://www.leonardstudios.com david

    nice list , I really like the apple inspired vertical accordion.

  • http://www.motorrad-autogrammkarten.de Björn Reichert

    jQuery UI Accordion is great :)

  • http://www.i-marco.nl/weblog/ Marco

    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

  • http://www.buildvoy.com builders

    Great tutorial. Many thanks!

  • http://roshanbh.com.np Roshan Bhattarai

    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.

  • http://www.clippingpathcenter.com Atik Rahman

    Nice sets of JQuery Accordions!

    Thanks

  • http://hh7.net lala

    number 2 not work why?

  • http://htmlcoderhelper.com/ Dmitry

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

  • http://www.alphabetix.net/blog Alphabetix

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