O'Reilly logo

Beginning JavaScript® and CSS Development with jQuery by Richard York

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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' ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required