12th: Ajax Control Toolkit control package-1. Accordion (multilayer folding effect)

1. Create a web form: accordion. aspx
2. Add a scriptmanager Control
3. Add an accordion control (NOTE: When you drag the accordion control to the form, the form is displayed as anything, only added to the source code. Code ) Code
< Body >
< Form ID = " Form1 " Runat = " Server " >
< Div >

< ASP: scriptmanager ID = " Scriptmanager1 " Runat = " Server " >
</ ASP: scriptmanager >
< BR />

< MAID: accordion ID = " Accordion1 " Runat = " Server " >
</ PC3: accordion >
< BR />
< BR />

</ Div >
</ Form >
</ Body >

4. In<MAID: accordion ID="Accordion1"Runat="Server"></PC3: accordion> Add <panes> </panes>

5.Drag several accordionpane in <panes> </panes> (several layers are required)

Code
< MAID: accordion ID = " Accordion1 " Runat = " Server " >
< Panes >
< C0: accordionpane ID = " Accordionpane1 " Runat = " Server " >
</ C0: accordionpane >
< C0: accordionpane ID = " Accordionpane2 " Runat = " Server " >
</ C0: accordionpane >
< C0: accordionpane ID = " Accordionpane3 " Runat = " Server " >
</ C0: accordionpane >
</ Panes >
</ PC3: accordion >

6. Add code to accordionpanel: Code
< MAID: accordion ID = " Accordion1 " Runat = " Server " >
< Panes >
< C0: accordionpane ID = " Accordionpane1 " Runat = " Server " >
< Header > Here is Title 1 </ Header >
< Content > Here is the content of heading 1. </ Content >
</ C0: accordionpane >
< C0: accordionpane ID = " Accordionpane2 " Runat = " Server " >
< Header > Here is Title 2 </ Header >
< Content >
Here is the content of Heading 2.
< ASP: textbox ID = " Textbox1 " Runat = " Server " > </ ASP: textbox >
< ASP: button ID = " Button1 " Runat = " Server " Text = " Button "   />
</ Content >
</ C0: accordionpane >
< C0: accordionpane ID = " Accordionpane3 " Runat = " Server " >
< Header > Here is Title 3 </ Header >
< Content > Here is the content of heading 3. </ Content >
</ C0: accordionpane >
</ Panes >
</ PC3: accordion >

7. OK, run, it can be used, but there is no border or colors.

8. Now you have to add the border color to the title.
① Open the accordion1 attribute panel and set the size, height (300px), width (200px)
② Set the title style, headercssclass (accordionheader)
③ Set the content style, contentcssclass (accordioncontant)

8. Create a style. Code
< Style Type = " Text/CSS " >
. Accordionheader
{
Color: # FFFF00;
Background - Color: # 3399ff;
Border: 1px solid # ff6600;
Padding: 1px;
Margin: 1px;
Cursor: pointer;
}
. Accordioncontent
{
Background - Color: # ff9933;
Padding: 1px;
Margin: 1px;
}
</ Style >

9. OK. Try it !!!