• Choose a category
• All
• Classic-Fiction

…

For our single-level accordion, we attached our accordion code to all of the first-level children of the root list by using this code: $('#accordion > li').click(…). As the structure of our nested list is exactly the same as before, we just need to apply the same code to the nested elements, which we can accomplish simply by adding them to the selector:

chapter_05/09_multi_level_accordion/script.js (excerpt)

$('#accordion > li, #accordion > li > ul > li').click(…);

If you follow that selector chain you’ll see that we’re adding the accordion code to the correct list items. We could have just added it to every list item, but it may lead to strange behavior with nested content, depending on your HTML structure. The resulting menu is shown in Figure 5.5.

Figure 5.5. A multiple-level accordion menu

If you want to add more levels to the accordion, just repeat this process again. If the long selectors get out of hand, you could add an extra class to the root of each level; any more than a few levels, though, and perhaps there are more appropriate controls to better present your information, rather than accordions (see Chapter 8).

jQuery UI Accordion

As we’ve seen, it’s easy to create a fairly complete accordion control from scratch using jQuery. However, the jQuery UI library also contains an accordion control, which includes an impressive range of options. These include changing icons, triggering on mouseover, and reacting in specific ways to the accordion’s containing element (for example, you can choose to let the content areas have a fixed height or an auto height). An example of the jQuery UI accordion, using the Sunny theme, is shown in Figure 5.6.

Figure 5.6. jQuery UI accordion control, with the Sunny theme

Like our custom accordion, the markup for the jQuery UI accordion requires pairs of headers and content elements. By default, it assumes that the headers are link tags and that the content immediately follows them; however, it will be confused if the content includes links, so it is usually best to specify a selector to help it determine which part of your content is the title:

chapter_05/10_jquery_ui_accordion/script.js (excerpt)

$('#accordion').accordion({header: 'h3'});

This is all the code you’ll need to turn your content into a fully functional accordion, as long as the h3’s next sibling is the content pane you want to hide or show.

The accordion also provides functionality to programmatically interact with the control. For example, you can open a particular content pane using the activate option, along with the index of the pane you want to open. To open the third pane (remember, indexes start from zero), you’d write the following:

:chapter_05/10_jquery_ui_accordion/script.js (excerpt)

$("#accordion").accordion('activate', 2);

There are many other options available for configuring and interacting with the accordion, and these are well documented on the jQuery UI site.

Using the jQuery UI control comes at a significant cost in terms of file size and bandwidth use compared with our custom control—but if you require advanced functionality and would rather avoid spending the time to implement it yourself, it can be a viable option.

Tabs

Tabs provide a way to group content logically, and have become a staple of many desktop applications’ interfaces. They’re also common on the Web, if you count top-level navigation elements styled to look like tabs. However, in the world of JavaScript, tabs are generally used to break content into multiple sections that can be swapped in order to save space.

Basic Tabs

Our simple tabs have all the content of the page preloaded—all we need to do is hide and show as required. If you’ve been following this book from the beginning, you can probably take a good guess at how to approach this.

We’ll break the tabs control into two components: the tab navigation, and a content area. This lets us have an acceptable solution for browsers that are without support for JavaScript: a simple list of anchor links to elements on the page. It might look