jQuery – Accordion

F03I0043 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

image

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.

image

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.

 

Other post in jQuery

Related Post

  • jQuery and ASP.NET UpdatePaneljQuery and ASP.NET UpdatePanel I’ve been busy over the last couple of weeks working on an administrative application that uses a ton of AJAXy stuff. The application is interactive in the sense that every time a field is update...
  • jQuery, Each() and Async GetsjQuery, Each() and Async Gets One of the things to keep in mind when using jQuery is that nothing is a blocking call.  Sure, there is a certain sequence to when things operate.  But, to be safe, you should always a...
  • JQuery, Cufon, and Dynamic ContentJQuery, Cufon, and Dynamic Content Yesterday I mentioned a new tool called Cufon that allows you to easily embed fonts in your web site. One quirk about this tool is that your HTML has to be rendered prior to applying, or refres...
  • jQuery UI – Resizable w/ ASP.NET ThemesjQuery UI – Resizable w/ ASP.NET Themes If you've been up to the jQuery web site and looked at the documentation for resizable() you probably thought, "hey, no problem, I can do that."  Well, that's what I thought, too, until I started ...
  • ASP.NET AJAX using JSON – Here’s how.ASP.NET AJAX using JSON – Here’s how. Last week I wrote a post about how simple JSON is. In it I explained the main differences between using JSON and using the update panel. I really started out thinking I'd get to how to write JSO...