Accordion control in Ajax Control Toolkit (ASP.Net) ~ IT Tutorials with Example

In this Article, We will learn How to use Accordion control of AJAX Control Toolkit in ASP.Net.

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 -> 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>

<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>

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<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>

<table>

<tr><td>Password:</td><td><input type="text" /></td></tr>

<tr><td>Re-Password:</td><td><input type="text" /></td></tr>

</table>

</Content>

</ajaxToolkit:AccordionPane>

<ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">

<Header>Login</Header>

<b><u>Login User</u></b>

<table>

<tr><td>Password:</td><td><input type="text" /></td></tr>

</table>

</Content>

</ajaxToolkit:AccordionPane>

</Panes>

</ajaxToolkit:Accordion>

</div>

</form>

</body>

</html>

In 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:

Accordion control have several other properties like:
1. FadeTransitions: FadeTransitions is used for adding the transition effect.
2. SelectedIndex: The AccordionPane to be initially visible

3. TransitionDuration: Number of milliseconds to animate the transitions.
4. Panes: Collection of AccordionPane controls

Hope you like it. Thanks.