HTML

Basic HTML for the accordion is as follows:

<ul class="accordion">
    <li>
        <h3>Handle 1</h3>
        <div class="panel">
            …
        </div>
    </li>
    <li>
        <h3>Handle 2</h3>
        <ul class="panel">
            …
        </ul>
    </li>
    <li>
        <h3>Handle 3</h3>
        <p class="panel">
            …
        </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>

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.

The article source:http://nefariousdesigns.co.uk/archive/2010/08/jquery-accordion/