ASP.NET Tutorial/Ajax/Accordion
What is an accordion
<source lang="csharp">
<%@ Page Language="C#" AutoEventWireup="true"%> <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxToolkit" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">
<title>Untitled Page</title> <style rel="stylesheet" type="text/css">
body {
font-family: Verdana; font-size: small;
} .Link {
text-decoration: underline; color: Blue;
} .accordionHeader {
border: 1px solid #2F4F4F; color: white; background-color: #2E4d7B; padding: 5px; margin-top: 5px; cursor: pointer;
} .accordionHeaderSelected {
border: 1px solid #2F4F4F; color: white; background-color: #5078B3; padding: 5px; margin-top: 5px; cursor: pointer;
} .accordionContent {
background-color: #D3DEEF; border: 1px dashed; border-top: none; padding: 5px;
}
</style>
</head> <body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> <ajaxToolkit:Accordion ID="Accordion1" runat="server" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent"> <Panes> <ajaxToolkit:AccordionPane runat="server"> <Header>Colors</Header> <Content> Choose a background color:
<asp:DropDownList id="lstBackColor" runat="server" Width="194px" AutoPostBack="True"> </asp:DropDownList>
Choose a foreground (text) color:
<asp:DropDownList id="lstForeColor" runat="server" Height="22px" Width="194px" AutoPostBack="True" > </asp:DropDownList> </Content> </ajaxToolkit:AccordionPane> <ajaxToolkit:AccordionPane runat="server"> <Header>Text</Header> <Content> Choose a font name:
<asp:DropDownList id="lstFontName" runat="server" Height="22px" Width="194px" AutoPostBack="True"> </asp:DropDownList>
Specify a font size:
<asp:TextBox id="txtFontSize" runat="server" AutoPostBack="True"> </asp:TextBox>
Enter the greeting text below:
<asp:TextBox id="txtGreeting" runat="server" Height="85px" Width="240px" TextMode="MultiLine" AutoPostBack="True"> </asp:TextBox> </Content> </ajaxToolkit:AccordionPane> <ajaxToolkit:AccordionPane> <Header>Other</Header> <Content> Choose a border style:
<asp:RadioButtonList id="lstBorder" runat="server" Height="59px" Width="177px" Font-Size="X-Small" AutoPostBack="True" RepeatColumns="2"> </asp:RadioButtonList>
<asp:CheckBox id="chkPicture" runat="server" Text="Add the Default Picture" AutoPostBack="True"> </asp:CheckBox> </Content> </ajaxToolkit:AccordionPane> </Panes>
</ajaxToolkit:Accordion>
</form>
</body> </html></source>