jQuery Accordion

Posted Sunday 22nd August, 2010

Update November 2010: Documentation for this jQuery Accordion can now be found here: jQuery Accordion - Tim Huegdon’s Projects

Following on from my post about my jQuery Carousel, here’s another widget: an accordion.

Until recently, I’ve usually used my friend and ex-colleague Marco’s jQuery accordion plug-in. However, whilst prototyping some stuff for work, I noticed a rather uncomfortable animation jump which, after some investigation, seems to be a well documented issue with jQuery’s slideDown() method. Since I was prototyping at the time, I quickly knocked up my own very basic accordion and, over time, it grew into something more.

The current version of my accordion follows a recent refactor–there are still several features I’d like to add–but for now I’m happy to let it out into the wild.


As was the case with my carousel, I’d definitely recommend taking a look at my page of example accordion implementations. This should give you a reasonable idea of the capabilities of the script; and as I update the widget, I’ll update this page.

Source Code

All the source code for the accordion–and the example page above–is available in the following GitHub repository:

jQuery Accordion – GitHub repository



Basic HTML for the accordion is as follows:

<ul class="accordion">
        <h3>Handle 1</h3>
        <div class="panel">
        <h3>Handle 2</h3>
        <ul class="panel">
        <h3>Handle 3</h3>
        <p class="panel">

For each panel in the accordion, you will require both a panel (the content of our accordion pane) AND a handle (an item that is clicked to open a panel). These can be anything you want as you can specify the jQuery selector used for each as part of your configuration. By default, the selector for handles is “h3”, and the selector for panels is “.panel”. Obviously that was fairly specific to my original implementation, so I’ll look to fix that in the near future.

Notice that, because we’re specifying our own selectors, we’re able to use flexible HTML for either the panel or the handle. However, it’s also worth remembering that the accordion script injects a link around the contents of whatever you specify as the handle, so that the handle becomes focusable and keyboard navigable. If you are likely to end up with invalid markup (i.e. the inline link wrapped around a block level element), you may get unpredictable behaviour cross-browser.


The included CSS is really only a reset style-sheet for the list elements within the accordion. You will probably already be achieving this with your own reset stylesheet, but you can add the following link to the head of your document:

<link rel="stylesheet" href="css/accordion.core.css" type="text/css" charset="utf-8">


To activate the accordion in your pages, you will require both jQuery and the accordion script itself to be included at the bottom of your page, just before the closing tag, but before any script that applies the accordion to a jQuery object.

A default implementation would look like this:

    <script type="text/javascript" src="js/jquery-1.4.2.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/jquery.accordion.2.0.js" charset="utf-8"></script>
    <script type="text/javascript">

As with my carousel, you can configure the accordion more specifically by passing a configuration object to the .accordion() method:

<script type="text/javascript">
        "handle":           "h3",
        "panel":            ".panel",
        "speed":            200,
        "easing":           "swing",
        "accordion":        true,
        "toggle":           false,
        "activeClassPanel": "open",
        "activeClassLi":    "active",
        "lockedClass":      "locked"

Note: The above options are all the defaults.

Parameters for the configuration object are as follows:

Option Value
handle A selector that specifies the element that will contain the injected link to trigger the opening of each panel.
panel A selector that specifies the panel element to open and close.
speed The animation speed for opening and closing. Defaults to 200.
easing The animation easing for opening and closing. Defaults to “swing”.
accordion A boolean to specify whether other items should close when one is opened. If this is false, all items work independently.
toggle A boolean to specify whether a handle can toggle opening and closing of an element.
activeClassPanel HTML class for the active panel.
activeClassLi HTML class for the active parent
  • lockedClass HTML class used to lock any panels open.

    I’ve tried to cover all the above concepts in the examples page. However, feel free to comment requests for more information, or bug reports. Alternatively, you can fork and append the GitHub repo, or register bugs there.

    Included in: Development, JavaScript, Tools, UI, Web, Web Standards, Widgets, jQuery


    1. Accessibility
    2. Agile
    3. Ajax
    4. Apache
    5. API
    6. Architecture
    7. Books
    8. Browsers
    9. CMS
    10. CouchDB
    11. CSS
    12. Design
    13. Development
    14. Django
    15. Email
    16. Events
    17. Gaming
    18. Grammar
    19. Hardware
    20. HTML
    21. HTTP
    22. Humour
    23. Idea
    24. Information Architecture
    25. JavaScript
    26. jQuery
    27. Lean
    28. Life
    29. Linux
    30. Literature
    31. Mac OS X
    32. Management
    33. Meme
    34. Microformats
    35. Monday
    36. MySQL
    37. Networking
    38. News
    39. Personal
    40. Photoshop
    41. PHP
    42. Process
    43. Python
    44. Reference
    45. REST
    46. Science
    47. SEO
    48. Server
    49. Site
    50. Sitepimp
    51. Social
    52. Spelling
    53. Syndication
    54. Testing
    55. The Future
    56. Thoughts
    57. Tools
    58. Tutorial
    59. Tutorials
    60. Typography
    61. UI
    62. UNIX
    63. Virtualisation
    64. Web
    65. Web Standards
    66. Widgets
    67. Wii
    68. Writing
    69. Xbox
    70. XHTML