Accordion Control In Ajax Control Toolkit (ASP.NET)

Anoop Kumar Sharma
9y
39.2k
0
6

Article

Accordion control provides us multiple collapsible panes or panels where only one can be expanded at a time. Each AccordionPane control has a template for its Header and its content. Before proceeding, I recommend you to read:

How to add an AJAX Control Toolkit in Visual Studio

Let's Begin:

1. Go to File, New, then Website and Create an Empty Website. Add a webform(Default.aspx) in it.

2. Add ScriptManager from AJAX Extensions (from v15.1 of AJAX Control Toolkit, ToolScriptManager is removed. Use Standard Script Manager).

3. Go to AJAX Control Toolkit in Toolbox and drop Accordion Control on Default.aspx.

4. Add AccordionPane in Panes collection of the Accordion.

AccordionPane contains two parts i.e. Header and Content. When AccordionPane is collapsed, only Header part is visible to us.

Code (Default.aspx)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Accordion Demo</title>
<style>
.headerCssClass{
background-color:#c33803;
color:white;
border:1px solid black;
padding:4px;
}
.contentCssClass{
background-color:#e59a7d;
color:black;
border:1px dotted black;
padding:4px;
}
.headerSelectedCss{
background-color:#808080;
color:white;
border:1px solid black;
padding:4px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div style="width:400px;">
<ajaxToolkit:Accordion ID="Accordion1" runat="server" HeaderCssClass="headerCssClass" ContentCssClass="contentCssClass" HeaderSelectedCssClass="headerSelectedCss" FadeTransitions="true" TransitionDuration="500" AutoSize="None" SelectedIndex="0">
<Panes>
<ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
<Header>New User
</Header>
<Content><b><u>New User</u></b>
<table>
<tr><td>Name:</td><td><input type="text" /></td></tr>
<tr><td>Password:</td><td><input type="text" /></td></tr>
<tr><td>Re-Password:</td><td><input type="text" /></td></tr>
<tr><td></td><td><input type="button" value="Submit"/></td></tr>
</table>
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
<Header>Login</Header>
<Content>
<b><u>Login User</u></b>
<table>
<tr><td>Name:</td><td><input type="text" /></td></tr>
<tr><td>Password:</td><td><input type="text" /></td></tr>
<tr><td></td><td><input type="button" value="Login"/></td></tr>
</table>
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
</div>
</form>
</body>
</html>

In the above code, I have used .headerCssClass (CSS class to use for the headers),.contentCssClass (CSS class to use for the content) and .headerSelectedCss (CSS class to use for the Selected headers) class for styling the Accordion Control.

Working Preview