Check out a free preview of the full jQuery Plugins and jQuery UI course:
The "Accordion Widget" Lesson is part of the full, jQuery Plugins and jQuery UI course featured in this preview video. Here's what you'd learn in this lesson:

This widget, per the example, combines a group of header and content panels so that appropriate style values can be applied to the group. Choose the “heightStyle” option for your “accordion” to fill according to its largest panel, to content size or the height of the parent element. Other “accordion” options include “active” to designate the primary panel, and “collapsible” to enable panels to be collapsed. Scott inserts a great deal of base mark-up to demonstrate that even when the structure changes, the widget is able to accommodate it. “Accordion” is set-up to anticipate what the user is trying to accomplish by creating flat panels secondary to headers. Add jQuery-generated icons by using the name of the icon you’re looking to use (ie: circle, triangle, etc.), or create your own. As with other widget interactions, “accordion” has events that, when activated, will notify when a panel is opened.

Get Unlimited Access Now