Dynamic AJAX Accordian Control 

Took me a while to figure this out, so I though I’d share! Here’s the code you require to create a Dynamic AJAX Accorian Controls in C#.

Put the following in your CSS file:
[code lang="css"].accordionHeader
{
border: 1px solid #2F4F4F;
color: white;
background-color: #313C53;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}

.accordionContent
{
background-color: #313C53;
border: 1px solid #2F4F4F;
border-top: none;
padding: 5px;
padding-top: 10px;
}
.accordionLink
{
background-color: #D3DEEF;
color: white:
}[/code]

This is the code you want in the Page_Load() section.

[code lang="csharp"]//Create our Accordian and Accordian Pane Objects

AjaxControlToolkit.Accordion accordian = new AjaxControlToolkit.Accordion();
AjaxControlToolkit.AccordionPane acordianPane =
new AjaxControlToolkit.AccordionPane();

// Configure Accordian Properties

accordian.ID = hostelId;
accordian.FadeTransitions = true;
accordian.FramesPerSecond = 10;
accordian.TransitionDuration = 500;
accordian.AutoSize = AjaxControlToolkit.AutoSize.None;
accordian.HeaderCssClass=”accordionHeader” ;
accordian.ContentCssClass = “accordionContent”;
accordian.RequireOpenedPane = false;
accordian.SuppressHeaderPostbacks = false;
accordian.SelectedIndex = -1;

// Create the Header Content and Main Content

Literal headerContent = new Literal();
headerContent.Text = “Accordian Header”;

Literal content = new Literal();
content.Text = “Accordian Content”

// Add Header and Conent to the Accordian Pane
acordianPane.HeaderContainer.Controls.Add(headerContent);
acordianPane.ContentContainer.Controls.Add(content);

accordian.Panes.Add(acordianPane);

// Add the Accordian to the ScriptManager (this code works with masterpages)

ScriptManager scriptManager = ScriptManager.GetCurrent(this.Page);
ScriptManager.Controls.Add(accordian);[/code]

So there you have it, an easy way to create a dynamic AJAX Accordian control at runtime!