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:
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)
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
  3. <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
  5. <!DOCTYPE html>
  7. <html xmlns="http://www.w3.org/1999/xhtml">
  8. <head runat="server">
  9. <title>Accordion Demo</title>
  10. <style>
  11. .headerCssClass{
  12. background-color:#c33803;
  13. color:white;
  14. border:1px solid black;
  15. padding:4px;
  16. }
  17. .contentCssClass{
  18. background-color:#e59a7d;
  19. color:black;
  20. border:1px dotted black;
  21. padding:4px;
  22. }
  23. .headerSelectedCss{
  24. background-color:#808080;
  25. color:white;
  26. border:1px solid black;
  27. padding:4px;
  28. }
  29. </style>
  30. </head>
  31. <body>
  32. <form id="form1" runat="server">
  33. <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
  34. <div style="width:400px;">
  35. <ajaxToolkit:Accordion ID="Accordion1" runat="server" HeaderCssClass="headerCssClass" ContentCssClass="contentCssClass" HeaderSelectedCssClass="headerSelectedCss" FadeTransitions="true" TransitionDuration="500" AutoSize="None" SelectedIndex="0">
  36. <Panes>
  37. <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
  38. <Header>New User
  39. </Header>
  40. <Content><b><u>New User</u></b>
  41. <table>
  42. <tr><td>Name:</td><td><input type="text" /></td></tr>
  43. <tr><td>Password:</td><td><input type="text" /></td></tr>
  44. <tr><td>Re-Password:</td><td><input type="text" /></td></tr>
  45. <tr><td></td><td><input type="button" value="Submit"/></td></tr>
  46. </table>
  47. </Content>
  48. </ajaxToolkit:AccordionPane>
  49. <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
  50. <Header>Login</Header>
  51. <Content>
  52. <b><u>Login User</u></b>
  53. <table>
  54. <tr><td>Name:</td><td><input type="text" /></td></tr>
  55. <tr><td>Password:</td><td><input type="text" /></td></tr>
  56. <tr><td></td><td><input type="button" value="Login"/></td></tr>
  57. </table>
  58. </Content>
  59. </ajaxToolkit:AccordionPane>
  60. </Panes>
  61. </ajaxToolkit:Accordion>
  62. </div>
  63. </form>
  64. </body>
  65. </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


Accordion control have several other properties like:
  • FadeTransitions: FadeTransitions is used for adding the transition effect.

  • SelectedIndex: The AccordionPane to be initially visible.



  • TransitionDuration: Number of milliseconds to animate the transitions.

  • Panes: Collection of AccordionPane controls.
Hope you liked it. Thanks!