Ajax Accordion Control

Accordion

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.

Properties

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.

Example

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

.header

{

background-color:Black;

font-family : Arial Black;

font-size : large;

color:white;

}

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

------------------

------

</context>

</asp:Accordionpane>

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

This is Accordion pane 2

</Header>

This is Accordion pane 2 context <br/>

----

-------------------

</context>

</asp:Accordionpane>

</panes>

</asp:Accordion>