AJAX Control Toolkit Tutorial: Accordion - Part Two

Welcome to the series of AJAX Control Toolkit Articles, Today we will discuss the first control of the Toolkit which is Accordion.

Accordion Web Control contains multiple panes and shows one at a time. The panes contain content of images and text having wide range of supported properties from formatting of the panes and text, like header and content templates, also it formats the selected header template.

Accordion contains multiple collapsible panes while one can be shown at a time and the extended features of accordion also has support data source which points to the DataSourceID and binds through .DataBind() method and also you need to specify the Header and Content template to show the data.

While the page posts back several times accordion can retain its state of opened collapsible panel. It does not mean that any collapsible panel which you opened at a time an then post back the page it keep track of that position but it retain state of only specified mentioned collapsible pane at the time of first time loading.

Accordion has also Auto Size property which is suitable for multiple layouts. We will discuss it later on with examples.

Accordion is also an extender control which can be placed in a container like div and so on. Extender controls are those controls which extend the functionality of your current work just as an example you have lot of paragraphs in a single page and you don’t have much space and want to summarize in small space then you need to embed to the div or some container which can hold all the information in accordion collapsible pans.

So let’s practically do something to test the properties of accordion, in the introductory article I have finished to setup your environment for AJAX Control Toolkit.

If you have missed it then check it from Here.

I have Created a New application and after installation of Ajax control toolkit I have dragged and dropped accordion control to the web form page of .aspx extension from toolbox.

After that initially the output looks like this.

Let’s start to check out the features one by one.

Firstly, we are heading toward to test the style of accordion.

1. Style the accrodion

Now we apply some styling so that it looks beautiful. To do that we will add these properties to the ajax control tookit accordion control.

• HeaderCssClass as the name suggests it is the style to control the header of the collapsible pan.
• HeaderSelectedCssClass is the style of the selected indexed pan which is opened by default at page load.
• ContentCssClass is the style which will show its impact in the content template of pan.

All of these are classes and they are to be define in the style tag placed inside head tag.

Full code of the classes is given below:

So after applying style our accordion control is looking good by using the contrast of dark and light colors.

2. Set the index of pane

For this purpose we use SelectedIndex="0" property as by default it is set to 0 means the first pane is opened so let’s change and check what happened.

I have changed it to SelectedIndex="2" the output is:

As image describes that now the default on load of page the third tab is opened.

Now what happen to the accordion if we have set the index which is not as the number of panes?

So what is your opinion it gives any error of index out of range. No it couldn’t but it collapse all the collapsible pans that is no pane is opened by default.

3. Autosize

This property is to support for multiple type of layouts. It has three layout features.

a. None:

It is the default option and most flexible option and it supports with the content movement and as the pane extend or shrinks the content move with it.

We have to set this property to none to use this.

Here you see this property in action

b. Limit

As the name suggests it will limit the behavior of showing content only specified by height property and the content could not move with the accordion pane as now the height of the accordion is set.

The rest of the content of the panes will show the scroll bar to show the content when Limit with height is specified.

You can see this in action.

c. Fill

By using this property, accordion will remain on same height as specified in the height of accordion.

The content shrunk or expand depend on height if not of same height it will show scroll.

See it in action below.

4. Fade Transitions

This property by default is set to true means it can have fade impact (low brightness)

In the accordion panes while collapsing or expanding. This is nice animation effect to be used while viewing content.

The property can be used by inserting following code.

Let’s see it in the action

5. Transition Duration

As the name suggest that it can add duration to the transition effect like we have fade transition effect it can add transition duration to all panes. The more the duration the more slowly the pane can open with this effect.

The property can be used by adding line of code.

The time is in milliseconds.

See the example below: