Updated Wiki: Accordion Control

The Accordion control lets you define multiple panes and display them one at a time. It is like having several CollapsiblePanel controls where only one can be expanded at a time. The Accordion control contains one or more AccordionPane controls. Each AccordionPane control has a template for its header and its content. The selected pane is automatically persisted across postbacks.

The Accordion control supports the following AutoSize modes to accommodate a variety of page layouts.

• None - The Accordion control grows and shrinks without restriction. This can cause other elements on the page to move up and down in order to accommodate the Accordion control.
• Limit - The Accordion control never grows larger than the value specified by its Height property. This causes the content to scroll if the content is too long to be displayed in the allotted space.
• Fill - The Accordion control is a fixed size as specified in its Height property. This causes the content to be expanded or shrunk if the content does not fit exactly into the allotted space.

Like most of the extenders in the AJAX Control Toolkit, the Accordion control is written using an extender. The extender requires input in a specific hierarchy of container elements (like div elements). Therefore, the Accordion and AccordionPane controls are used to generate the expected input for the extender. The extender can also be used on its own if you provide appropriate input.

The Accordion control can also be data-bound. To bind the control, specify a data source using the DataSource or DataSourceID properties, and then set the data items in the HeaderTemplate and ContentTemplate properties. You must call the DataBind method to bind the control to the data.

Accordion Tutorials

Creating a Simple Accordion

Accordion Reference

Reference