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