Group Discounts available for 3+ students and Corporate Clients

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/>








“At TekSlate, we are trying to create high quality tutorials and articles, if you think any information is incorrect or want to add anything to the article, please feel free to get in touch with us at, we will update the article in 24 hours.”

0 Responses on Ajax Accordion Control"

Leave a Message

Your email address will not be published. Required fields are marked *


Please Enter Your Details and Query.
Three + 6