---
title: "Ajax Toolkit Accordion Control in Asp.net"  
description: "The Accordion is a web control that allows you to provide multiple panes and display them one at a time. The Accordion is implemented as a web control"  
author: "Pushpendra Singh"  
published: 2010-12-06  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/252/ajax-toolkit-accordion-control-in-asp-dot-net  
category: "ajax"  
tags: ["ajax"]  
reading_time: 2 minutes  

---

# Ajax Toolkit Accordion Control in Asp.net

The [Accordion](https://www.mindstick.com/blog/626/accordion-using-bootstrap-in-asp-dot-net) is a web control that allows you to provide multiple panes and display them one at a time. The Accordion is implemented as a web control that contains AccordionPane web [controls](https://www.mindstick.com/articles/66/how-to-create-controls-at-run-time-in-csharp-dot-net)\

**Accordion [Properties](https://yourviews.mindstick.com/view/81845/now-it-s-possible-to-predict-properties-of-any-molecule):**

· **SelectedIndex** - The AccordionPane to be initially visible

· **FadeTransitions** - True to use the fading [transition](https://answers.mindstick.com/qa/94090/a-material-is-dimensionally-stable-at-room-temperature-if-its-glass-transition-temperature-tg-is) effect, false for [standard](https://www.mindstick.com/articles/23223/naming-convention-or-coding-standard) transitions.

· **TransitionDuration** - Number of milliseconds to animate the transitions

· **FramesPerSecond** - Number of frames per second used in the transition [animations](https://www.mindstick.com/forum/160680/how-to-use-css-transitions-and-animations-in-the-webpage)

· **AutoSize** - Restrict the growth of the Accordion.

· **RequireOpenedPane** - Prevent closing the currently opened pane when its header is clicked (which ensures one pane is always open). The [default value](https://www.mindstick.com/forum/23023/default-value-when-using-singleordefault) is true.

· **SuppressHeaderPostbacks** - Prevent the client-side click handlers of elements inside a header from firing.

· **Panes** - [Collection](https://www.mindstick.com/articles/1718/collections-in-java) of AccordionPane controls.

· **AccordionPane** contains other control which will expand and collapse.

· **HeaderTemplate** - The Header [template](https://www.mindstick.com/blog/282/creating-custom-template-in-joomla) contains the markup that should be used for an pane's header when databinding.

· **ContentTemplate** - The Content template contains the markup that should be used for a pane's content when databinding.

## Code:

```
 <%-- ScriptManager control manages client script for AJAX enabled ASP.NET pages.This enables partial-page rendering and Web-service calls.You have to used this if you want to use ajax control toolkit--%><asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>  <%-- Add Accordian control from AjaxControl Toolkit--%><cc1:Accordion ID="Accordion1" runat="server" FadeTransitions="true" TransitionDuration="100" FramesPerSecond="30" AutoSize="None"  SuppressHeaderPostbacks="true"> <%-- Add Pane section here--%><Panes> <%-- Add pane for admin login here--%> <cc1:AccordionPane ID="AccordionPane1" runat="server"><Header><asp:Panel ID="Panel2" runat="server" BackColor="BlueViolet"><asp:Label ID="Label1" runat="server" Text="AdminLogin"></asp:Label></asp:Panel><asp:Panel ID="Panel7" runat="server" Height="10px"></asp:Panel> </Header><Content><asp:Panel ID="Panel1" runat="server"><asp:Login ID="Login1" runat="server"></asp:Login></asp:Panel> </Content> </cc1:AccordionPane> <%-- Add pane for User login here--%>                <cc1:AccordionPane ID="AccordionPane2" runat="server"> <Header><asp:Panel ID="Panel3" runat="server" BackColor="BlueViolet"><asp:Label ID="Label2" runat="server" Text="User Login"> </asp:Label></asp:Panel><asp:Panel ID="Panel8" runat="server" Height="10px"></asp:Panel> </Header> <Content><asp:Panel ID="Panel4" runat="server"><asp:Login ID="Login2" runat="server"></asp:Login></asp:Panel> </Content> </cc1:AccordionPane></Panes></cc1:Accordion>
```

**Run the project**

Default AdminLogin panel is open

![Ajax Control Toolkit Accordion Control in Asp.net](https://www.mindstick.com/mindstickarticle/f03aa211-4cb2-4d6d-8d52-af54429ab5a0/images/bad53981-a756-41a9-987f-50338492d283.png)

When you click User Login then user login panel will open and admin login panel will collapse.

![Ajax Control Toolkit Accordion Control in Asp.net](https://www.mindstick.com/mindstickarticle/f03aa211-4cb2-4d6d-8d52-af54429ab5a0/images/c6c0875d-f614-4667-9b09-ebdf179461de.png)

---

Original Source: https://www.mindstick.com/articles/252/ajax-toolkit-accordion-control-in-asp-dot-net

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.