Ajax Accordion Control

Ratings:
(4)
Views:433
Banner-Img
  • Share this blog:

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>  

You liked the article?

Like : 0

Vote for difficulty

Current difficulty (Avg): Medium

Recommended Courses

1/15

About Author
Authorlogo
Name
TekSlate
Author Bio

TekSlate is the best online training provider in delivering world-class IT skills to individuals and corporates from all parts of the globe. We are proven experts in accumulating every need of an IT skills upgrade aspirant and have delivered excellent services. We aim to bring you all the essentials to learn and master new technologies in the market with our articles, blogs, and videos. Build your career success with us, enhancing most in-demand skills in the market.


Stay Updated


Get stories of change makers and innovators from the startup ecosystem in your inbox