Introduction: Here I will explain how to use the Ajax Accordion control in asp.net.

Description:

In Previous post I explained clearly how to show the progressbar during check the username availability using asp.net .Now I will explain how to use the Accordion control in asp.net. Accordion control is used to bind multiple panes and display one pane at a time. This control is like having multiple collapsiblepanels where only one can be opened at a time. To use Accordion control in our code we need to design code in certain format like below

If we observe above code we declared so many properties for Accordion control here I will explain what each property is

SelectedIndex - This property is used to set initial AccordionPane to be visible.

HeaderCssClass – This CSS class property is used to apply style to Header of all AccordionPanes.

HeaderSelectedCssClass – This CSS class is used to change the color of selected AccordionPane.

ContentCssClass – This CSS class is used to update the AccordionPane.

FadeTransitions – This Property is used to set True to use the fading transition effect, false for standard transitions.

TransitionDuration – This Property is used to set the Number of milliseconds to animate the transitions

FramesPerSecond - This Property is used to set the Number of frames per second used in the transition animations.

RequireOpenedPane – This Property is used to Prevent closing the currently opened pane when its header is clicked (which ensures one pane is always open). The default value is true.

SuppressHeaderPostbacks – This Property is Prevent the client-side click handlers of elements inside a header from firing (this is especially useful when you want to include hyperlinks in your headers for accessibility)

AutoSize– This Property is used to set the height of the accordion control. This Property contains 3 types of varieties

1.None- The Accordion grows/shrinks without restriction

2.Auto- the Accordion never grows larger than the value specified by its Height property.

3.Fill- The Accordion always stays the exact same size as its Height property

Panes - Collection of AccordionPane controls

HeaderTemplate - The Header template contains the markup that should be used for an pane's header when databinding

ContentTemplate - The Content template contains the markup that should be used for a pane's content when databinding

Now we can see how to use accordion control in our application for those first add AjaxControlToolkit reference to your application and add

But one strange thing happening with my above same code. That is, when I am in design mode, If i switch from HTML Source code page to Design page, and return to HTML page, I see some of the code written above for accordian will be getting created automatically immediately after actual code.