Ajax Accordion Control


Accordion control is used to provide a number of panes on the page allow the user to expand a panel by clicking on its header when user select a pane then all other panes available in the accordion control will be automatically collapsed.


FadeTransitions :

Used to specify whether or not the FadeTransition effect will apply to the pane whenever it is expanded or collapsed.

Framespersecond :

Used to specify no of frame to change within a second while applying Fade Transitions.

Transition Duration : 

Used to specify the time in Millie-seconds for the total transition to complete

Headercssclass :

Used to specify the css class you want to use to display the header for accordion panes available within Accordion control when it is not selected.

Headerselectedcssclass :

Used to specify the css class to use to display the header of Accordion panes when they are selected.

Required opened pane :

Indicates whether or not atleast one pane is opened within the accordion control.

Use the property panes to create panes within the accordion control & for every pane you have to specify header& content where header is used to specify heading for that & content is used to specify the context to display within that pane.


The following example demonstrates how to use the accordion.

Add a page to the website and then take a Toolkit scriptmanager on the page and within the HTML source of the page within the headsection create two css class with the names ‘header’ & ‘Selectedheader’ as follows

<style type=”text/css”>




font-family  :       Arial Black;

font-size       : large;



.selected header


background-color:Blue :

font-family:Arial Black:

font-size   :large;

color : white ;


Within HTML source of the page itself drag& drop an accordion control and design it as follows with two Accordion panes.

<asp: Accordion ID=”Accordion1”  runat=”server” FadeTransitions=”true” Headercssclass=”header” Framepersecond=”30” TransitionDuration=”2000” Headerselectedcssclass=”selectedheader” requireiopenedpane=”true”>  <panes>

<asp:Accordionpane Id=”AP1” runat=”server”>


This is Accordion Panel

</Header>  <context>

This is according panel context <br/>

This is Accordion panel context <br/>





<asp:Accordiopane Id=”AP2” runat=”server”>


This is Accordion pane 2



This is Accordion pane 2 context <br/>

This is Accordion pane 2 context <br/>