.NET Answers

If you’ve been using the MS-AJAX Accordion control, stop it right now!

Seriously. Once I show you how easy the jQuery version is, you’ll want to drop it. Shoot! You may even want to go to the trouble of replacing the MS-AJAX Accordion control in the code you’ve already written.

If you’ve been to the jQuery site, you’ll see that they say the way to set up your HTML is to write code that looks something like this

<div class="accordion">
    <div><a href="#">Header Text One</a>
    <div>Content for
    <br />the first section</div></div>
    <div><a href="#">Header Text Two</a>
    <div>Content for
    <br />the second section</div></div>
</div>

But if you look at the demo code, you’ll see they did something entirely different.

This is what your HTML should look like for a simple accordion. Make sure you are sucking in the theme stylesheet or nothing will work.

<div class="accordion">
    <h3><a href="#">Header Text One</a></h3>
    <div>Content for
    <br />    the first section</div>
    <h3><a href="#">Header Text Two</a></h3>
    <div>Content for
    <br />the second section</div>
</div>

Note the two major differences. You don’t want to wrap each section with a DIV and the header needs to be a combination of h3 and an anchor tag.

To turn this HTML into an accordion, all you need to do is use the following jQuery script

$(function() {
    $(".accordion").accordion();
});

Which should give you an accordion that looks something like this

Since I didn’t style any of my content, it looks how it looks.

There are several options that you can pass in when you create the accordion in your jQuery. You can, for example, specify which pane to display first. If I wanted header two to be expanded, I would use

$(function() {
    $(".accordion").accordion({active:1});
});

If I want to change how the panes animate, I can pass in an animated option.

If you want to use something other than the h3 tag for your header, you can specify it with the header option.

This is another place where the documentation seems to be goofed up right now. The default for this seems to be h3. If we wanted to use the anchor tag instead we’d pass in

$(function() {
    $(".accordion").accordion({header: 'a'});
});

If you do change this, you’ll want to make sure you style the new header as a block level element–otherwise the header won’t span the width of the accordion.

You may also want to have the panels expand when the mouse rolls over them. You can do this with the MS-AJAX control and it should be no surprise that you can do that with the jQuery accordion as well. In fact, you could specify any event.

All you need to do is pass in the event option.

$(function() {
    $(".accordion").accordion({event: 'mouseover'});
});

As with other jQuery controls, the accordion has an event that will let you know when something has changed. This fires once any animations have completed. The function that gets called takes two parameters–the event and an object that has four properties hanging off of it: newHeader, oldHeader, newContent, and oldContent. So you can take control at that point. Perhaps you might use this to load the new content dynamically.