jQuery Accordion

• Handle 1

  A panel filled with text.

• Handle 2
  • How about…
  • … a list …
  • … of items?
• Handle 3

  An image in a paragraph.

• Handle 4

  A nested list of items

  • Item 1
  • Item 2
    • Subitem 1
    • Subitem 2
    • Subitem 3
  • Item 3
  • Item 4
  • Item 5

Introduction

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

Features include:

• Fully customisable handles and panels using jQuery selectors.
• Customise the speed and easing of animation between panels.
• Allows single or multiple panels open.
• Allow the user to toggle a panel open or closed.
• Mark panels active on load.
• Mark panels to be locked open at all times.

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:

Custom events

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