jQuery Accordion

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.

Demo

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

Implementation

HTML

Basic HTML for the accordion is as follows:

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

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.

CSS

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

JavaScript

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">
        $(".accordion").accordion();
    </script>
</body>

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

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

Note: The above options are all the defaults.

Parameters for the configuration object are as follows: