Web Development with jQuery

Chapter 15Accordion

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 popular websites. If you'd like to see a quick demo of the Accordion UI, look at 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 find 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 animating 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 briefly explained what an Accordion UI is, the following document, which can be retrieved from www.wrox.com/go/webdevwithjquery ...