Dynamic AJAX Accordian Control

Posted by: Matthew on Wednesday, April 28, 2010

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

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

//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);

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