jQuery Accordion

Introduction

This accordion widget for jQuery is a small and simple script that addresses common issues with jQuery accordions in general.

Features include:

Source

You can find the source, including demos, on GitHub at:

http://github.com/nefarioustim/jquery-accordion/

Basic implementation

To implement an accordion like the example above, you will need to do the following:

Include the JavaScript and CSS assets

<link rel="stylesheet" href="/a/c/accordion.core.css" type="text/css"><script type="text/javascript" src="/a/j/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/a/j/jquery.easing.min.js"></script>
<script type="text/javascript" src="/a/j/jquery.accordion.2.0.min.js"></script>

The jquery.easing.min.js file above is entirely optional. This script provides the standard jQuery Easing plugin, as supplied as part of jQuery UI.

Insert the widget HTML

Next step is to insert your HTML. The example above is as follows:

<ul id="example1" class="accordion">
    <li>
        <div class="handle">Handle 1</div>
        <div class="panel loading">
            <p>A panel filled with text.</p>
        </div>
    </li>
    <li>
        <div class="handle">Handle 2</div>
        <ul class="panel loading">
            <li>How about&hellip;</li>
            <li>&hellip; a list &hellip;</li>
            <li>&hellip; of items?</li>
        </ul>
    </li>
    <li>
        <div class="handle">Handle 3</div>
        <p class="panel loading">
            <img src="/a/i/spa.png" alt="" width="220" height="220">
            An image in a paragraph.
        </p>
    </li>
    <li>
        <div class="handle">Handle 4</div>
        <div class="panel loading">
            <h4>A nested list of items</h4>
            <ul>
                <li>Item 1</li>
                <li>Item 2
                    <ul>
                        <li>Subitem 1</li>
                        <li>Subitem 2</li>
                        <li>Subitem 3</li>
                    </ul>
                </li>
                <li>Item 3</li>
                <li>Item 4</li>
                <li>Item 5</li>
            </ul>
        </div>
    </li>
</ul>

The main thing to notice here are the id example1, and the classes accordion, handle, panel, and loading.

The accordion class is used by the accordion.core.css file to apply some reset styles and some common styles required on accordions. Feel free to dump this file and add your own reset and common styles in the stylesheet of your choice.

The handle class designates the click area for our accordion, and the panel class designates the area that will collapse. Each handle and panel set is enclosed within an li, and this is how the accordion script detects a relationship between a handle and a panel.

The loading class applies styles to hide the panels during load, to avoid a flash of unstyled content. The accordion script will automatically remove this class during initialisation.

Define your own styles

Handles collapse panels; this is pretty much all there is to it. There are no limits on the way you can style the accordion once you understand this simple fact.

The example above used the following simple CSS:

#example1 {
    border: 1px solid #ccc;
    margin: 0 auto;
    width: 250px;
}
#example1 .handle {
    background: #999;
    border: 1px solid;
    border-color: #eee #666 #666 #eee;
    color: #fff;
    font: 14px/1.3 "Helvetica Neue", arial, sans-serif;
    padding: 4px 8px;
    text-shadow: -1px -1px 0 #777;
}
#example1 .handle a {
    display: block;
}
#example1 .panel {
    padding: 4px 8px;
}

Configure and instantiate the accordion

The final step is to create a configuration object and pass it to the newly added .accordion() method of any jQuery object.

For the demo above, I have included all the available configuration options. In a real-world implementation, you could skip any values where you wish to use the default:

$('#example1').accordion({
    handle: ".handle", // Default: "h3"
    panel: ".panel", // Default: ".panel"
    speed: 500, // Default: 200
    easing: "easeInOutQuad", // Default "swing"
    canOpenMultiple: false, // Default: false
    canToggle: false, // Default: false
    activeClassPanel: "open", // Default: "open"
    activeClassLi: "active", // Default: "active"
    lockedClass: "locked", // Default: "locked"
    loadingClass: "loading" // Default: "loading"
});

Here’s a more in depth look at those options:

Configuration options

The following options may be defined in the configuration object passed to the $(element).accordion() constructor:

Parameter Data type Default Description
handle String "h3" The handle is the element that will contain a link for triggering the opening and closing of panels in the accordion. This string is a jQuery selector.
panel String ".pane" The jQuery selector that will find the panels of your accordion. These will be tied to a handle that exists in the same li.
speed Number 200 The number of milliseconds the opening and closing animations should last for.
easing String "swing" The easing method to use on the opening and closing animations.
canOpenMultiple Boolean false This flag allows the opening of multiple tabs at one time.
canToggle Boolean false This flag allows the user to toggle a panel open and closed.
activeClassPanel String "open" This class is applied to an open panel.
activeClassLi String "active" This class is applied to the li of an open panel.
lockedClass String "locked" This class should be applied to any panels to be locked open.
loadingClass String "loading" This class can be applied to any items you wish to apply styling to whilst the accordion is rendering. Primarily, it should be used to circumvent a flash of unstyled content.

Custom events

The following namespaced jQuery custom events are available for you to bind your own methods to:

Event name Description
panel-open.accordion This event fires when a panel of the accordion is opened.
panel-close.accordion This event fires when a panel of the accordion is closed.
© 2010 Tim Huegdon - This website contains no gluten.