The accordion is a web control that allows us to provide multiple panes and display all of them at one time. It is like having several collapsible panels where only one is allowed to expand at a time. The accordions are implemented as the web control that contains accordion panes web control. Each accordion pane has a template for its header and the content. We can keep track of each pane so it stays visible across post pack.

It allows three auto size modes so it can keep track of variety of layouts.

1. None
The accordion grows without any restriction. So the other element of the page can move up and down.

2. Limit
The accordion does not grow more than the limit specified by the height property. This will bound the content to scroll if it is too large to be displayed.

3. Fill
The accordion always remains the same size as that specified in the height property. Hence you will find that the content either expands or shrunk to fit in the accordion.

The accordion is written using the extender like most of the other extender in the AJAX toolkit. The accordion expects its input to be according to the container elements so the accordion and accordion pane are used to generate the expected input for the extender. The extender can be also used on its own if you provide the exact input.

The accordion can also be data bound. You will have to simply a data source through the data source and data source ID property and then set the data item in the header template or the content template properties.

I would like to list some of the accordion properties. They are as follows:

1. Selected index
2. HeadercssClass
3. HeaderSelected Css class
4. contentCSSclass
5. FadeTransition
6. TransitionDuration
7. Framespersecond
8. Autosize
9. Requireopenedpane
10. Headertemplate
11. Content template
12. Datasource
13. datasourceID
14. dataitem

And so on.

You will have to assign all these properties the exact value if you want to design a proper accordion.

Some issues
I would like to bring into consideration the issue of Limit mode. The auto size “limit” mode works exactly the same as the “fill” for the internet explorer 6 or 7 because they do not support the maximum height CSS property.

Also, viewing the demo in the internet explorer 6 maximizing the browser at higher resolution will cause the transitions to animate at slow speed than at lower resolutions.

You will definitely find the accordion to be very good during the time of coding. You will definitely have to use it again and again as it is one of the most important controls you will come across.

Tags: accordion properties, asp.net accordion control, layouts