Accordion
So far you’ve learned about how jQuery makes dragging and dropping easy to implement, and
you’ve learned how jQuery makes it a breeze to select items by drawing a box. You've also
seen how ridiculously easy it is to implement drag-and-drop sorting with jQuery. This chapter
presents another cool jQuery UI plugin, Accordion.The jQuery UI Accordion plugin makes it easy to implement content that expands and folds
like your favorite polka instrument, the accordion. Accordion UI widgets can be seen on popu-
lar websites. If you’d like to see a quick demo of the Accordion UI, look at http://www.jqueryui.com/
accordion/. The downside of the jQuery UI Accordion plugin is that you can have only one
item open at a time. It’s easy to write some code that sidesteps this limitation.In this chapter, you fi nd out how to use the jQuery UI Accordion plugin to make your own
Accordion widget and customize its look.Building an Accordion UI
This section discusses how to make an Accordion UI, which is a collection of content panes
that each has its own header, where only one content pane is visible at a time. When you click
the other content panes, a smooth animation transitions the visible pane to closed by animat-
ing its height, leaving only its header visible, animating the other element’s height, expanding
that element until it is fully visible.Now that we have briefl y explained what an Accordion UI is, the following document, which
can be retrieved from http://www.wrox.com/go/webdevwithjquery as Example 15-1, begins with a basic
implementation of the jQuery UI Accordion plugin:<!DOCTYPE HTML>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='content-type'
content='application/xhtml+xml; charset=utf-8' />
<meta http-equiv='content-language' content='en-us' />
<title>Accordion Plugin</title>