Ajax Control Toolkit Accordion Control

Modified on 2010/05/04 19:28 by Stephen Walther — Categorized as: Uncategorized

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.

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

Accordion Reference