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
<style type=”text/css”>
.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”>
<Header>
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”>
<Header>
This is Accordion pane 2
</Header>
<context>
This is Accordion pane 2 context <br/>
This is Accordion pane 2 context <br/>
----
-------------------
</context>
</asp:Accordionpane>
</panes>
</asp:Accordion>