T his article is downloaded from

Transcription

1 I ntroduc tion A ccordion is a web control with multiple collapsible panes with only one pane ac tive at a time. A jax ac c ordion c ontrol us es another control called as accordianpane to display its several panes. Each accordion control has header content and display content. A ccordion control keeps track of the active pane and hides this pane if any other accordianpane is made visible. A c c ordion c ontrol c an be s et to the data s ourc e. I t has DataSource and DataSourceId properties which allow you to set it properties just like any standard asp.net controls. Properties of Accordion Control Below are some of the common properties of accordion control. : T his property let you s pec ify the C SS c las s for the s elec ted A c c ordionp ane header. T his property c an be s et for the whole accordion control or the individual accordionpane control. HeaderSelectedCssClass HeaderCssClass: T his property let you define the C SS c las s for s tyling the header s ec tion of all A c c ordionp ane c ontrols. T his property als o c an be s et for the whole ac c ordion c ontrol or the individual accordionpane control. ContentCssClass: T his property let you specify the name of the C SS c las s for s tyling the c ontent area of the A c c ordionp ane c ontrols. FadeTransitions: T his Boolean property will determine whether you want to s how fading effec t while moving from one pane to other TransitionDuration: T his property let you define the speed of trans ition between panes in millis ec onds. FramesPerSecond: T his property is used along with the T ransitionduration property. T his property allows you to specify the number of frames per s ec ond to be us ed during trans ition

2 between A c c ordionp ane c ontrols. : T his property let you s elec t the ac c ordion pane bas ed on its index value s tarting from 0.SelectedIndex I n my s ample demo, I have four ac c ordion panes eac h with s mall details on one of the demi-gods in H induis m. Below is the c ode of ac c ordion c ontrol along with one of the four ac c ordion panes. <ajaxt oolkit:a ccordion ID="A ccordion1 " runat="server" FadeT r C ontentc s s C las s ="ac c ordionc ontent" Frames P ersec ond="6 0 " SuppressHeaderP ostbacks="false" T ransitionduration="200"> <P anes> <ajaxt oolkit:a ccordionp ane ID="accV ishnu" runat="server"> <Header>1. V ishnu</header> <C ontent> V is hnu (Sans krit: व ण ) is a main Vedic God (including His different avataras<br /> <asp:image ID="Image2 " runat="server" ImageU </C ontent> </ajaxt oolkit:a c c ordionp ane> </P anes> </ajaxt oolkit:a c c ordion> When I run the applic ation, my output looks like

3 A s you s ee above, only one pane is vis ible at a time. O n c lic king any of the remaining panes, current pane hides and the selected pane becomes visible. For Example on clicking the third pane, my s c reen looks like

4 O pen pane on mous e over By default, pane expands on click of a mouse left button. To expand the pane on mouseover, we can use the below chunk of code A dd the JavaScript function O penpane on accordion pane mouse over <ajaxt oolkit:a ccordionp ane ID="accV ishnu" runat="server"> <H eader> <a href="" onmouseover="o penpane('0 ')">1. V is hnu</a> </H eader> <C ontent>

5 For the firs t pane, parameter 0 is pas s ed to this func tion. For s ec ond, parameter is 1 and s o on. JavaSc ript func tion is function O penpane(paneindex) var behavior = $get("<% =A ccordion1.c lientid% > ").A c c ordionbehavior; behavior.s et_selec tedi ndex(panei ndex); Dynamic ally A dding mous e over on A c c ordion P ane If we have many accordion controls, then adding a mouse over event on every accordion control is quite cumbersome. Below JavaScript code will make our task very easy in such cases. Below JavaScript will loop through all the accordion panes to add a mouse over event to each pane. Additionally, you can write a custom logic of skipping some of the accordion panes function A ddm ouseo vert oa ccordion() var acc = $get("<% =A ccordion1.c lientid% > ").A c c ordionbehavior; for (paneidx = 0 ; paneidx < acc.get_c ount(); panei dx++) $addhandler(acc.get_p ane(paneidx).header, "mous eover", ac c._headerc lic kh andler); E xpand P ane us ing its I D Usually, we select the accordion pane at runtime using selected index property. But in some complex scenarios, you may be hiding some of the accordion control and hence determining the exact order of visible accordion control is quite troublesome. So, there is arising need to select the accordion pane by its id. Below is the c ode whic h lets you s elec t the ac c ordion pane by

6 its id. protec ted void SetP ane(a c c ordion ac, s tring P anei D) int I ndex = 0 ; foreach (A jaxc ontrolt oolkit.a ccordionp ane pane in ac.p anes ) if (pane.v is ible == true) if (pane.i D == P anei D) ac.selec tedi ndex = I ndex; break; I ndex++; Hiding accordion pane using JavaScript You can also hide an accordion pane dynamically using JavaScript as function hidea ccordionp ane(paneno) var acc = $get("<% =A ccordion1.c lientid% > ").A c c ordionbehavior; ac c.get_p ane(paneno).header.s tyle.dis play = "none"; ac c.get_p ane(paneno).c ontent.s tyle.dis play = "none"; function pageload() hidea c c ordionp ane(1 );

7 O n us ing the above c ode, my s ec ond pane hides as s hown in the below s c reens hot