Chapter 13. Accordion UI
So far you've learned about how jQuery makes dragging and dropping very easy to implement, and you've learned how jQuery makes it a breeze to select items by drawing a box. And you've also seen how ridiculously easy it is to implement drag-and-drop sorting with jQuery. In this chapter, I present another very cool jQuery UI plugin, called Accordion.
The jQuery UI Accordion plugin makes it very easy to implement content that expands and folds like your favorite polka instrument, the accordion.
Accordion UI widgets can be seen on popular websites like www.apple.com/mac. In this chapter, you'll find out how to use the jQuery UI Accordion plugin to make your very own Accordion widget and customize its look.
Building an Accordion UI
In this section, I discuss how to make an Accordion UI. An Accordion UI, by definition, 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 on the other content panes, a smooth animation transitions the visible pane to closed by animating its height, leaving only its header visible, and animates the other element's height, expanding that element until it is fully visible.
Having briefly explained what an Accordion UI is, the following document begins with a basic implementation of the jQuery UI Accordion plugin:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns='http://www.w3.org/1999/xhtml' ...
Get Beginning JavaScript® and CSS Development with jQuery now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
