AJAX Toolkit Accordion Control Extender

Updated on 18 Apr 2012,
Published on 04 Jun 2008

Introduction

The AJAX Control toolkit for ASP.Net 2.0 provides a control called Accordion control extender that works like a collapsible panel control we discussed earlier.

The AJAX Accordion control looks like a collection of Collapsible Panel controls in which one Panel opens and other previously expanded panel collapses. You can create as many panes in Accordion Control.

Accordion Control extender contains two types of templates, HeaderTemplate and ContentTemplate. Another part of Accordion Control is collection of Panes. Panes contain the collection AccordionPane having their own attributes and templates to hold the header and content. AccordionPane control extender works as child extender control for Accordion extender control.

AJAX Control Toolkit Examples:

You can see the live samples and examples of AJAX Control Toolkit from the following links:

Accordion extender control consists of in-built feature of animation that expands and collapses the Accordion Panes with fade effect or according to specific speed for frames per second. 

Accordion Extender Control Properties

AutoSize: It works according to the Height property of accordion control. AutoSzie property is of enumerator type with 3 values: None, Fill and Limit.

  • Fill: It shrinks the selected pane to the specified Height limit of the Accordion Control. Initially the selected pane opens without height limit then shrinks back to the Height limit.
  • Limit: It does not allow the expanding pane to expand more than the Height Limit.
  • None: It does not restrict the Accordion Panes for their expand size. Other page elements move up or down according to the variation in height of different panes of Accordion control.

FadeTransitions: It allows the fade animation effect for expand and collapse behavior of Accordion Panes.

TransitionDuration: Time in milliseconds to complete the transition effect.

FramesPerSecond: number of frames per second to complete the transition effect. Higher the number for FramesPerSecond smoother will be the transition effect.

SelectedIndex: Index of the Accordion pane required as initially visible.

RequireOpenedPane: If true then it keeps the currently selected pane visible.

ContentCssClass: Name of the CSS class to apply the CSS styles on content template of Accordion Control.

HeaderCssClass: Name of the CSS class to apply the CSS styles on Header Template.

HeaderSelectedCssClass: Name of the CSS class to apply the CSS styles on the Header template of selected AccordianPane.

Sample Code for Accordion Extender Control

CSS Code
body {
    font-family: verdana;
    font-size: 11px;
}

.header, .selected {
    width: 300px;
    background-color: #c0c0c0;
    margin-bottom: 2px;
    padding: 2px;
    color: #444444;
    font-weight: bold;
    cursor: pointer;
}

.content {
    width: 300px;
    margin-bottom: 2px;
    padding: 2px;
}

.selected, .content {
    border: solid 1px #666666;
}
HTML code
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<ajaxtoolkit:Accordion ID="Accordion1" 
    runat="server" 
    TransitionDuration="250" 
    FramesPerSecond="40"
    FadeTransitions="true" 
    HeaderCssClass="acc-header" 
    ContentCssClass="acc-content"
    HeaderSelectedCssClass="acc-selected">
    <Panes>
        <ajaxtoolkit:AccordionPane ID="AccordionPane1" runat="server">
            <Header>
                Pane 1</Header>
            <Content>
                Content 1</Content>
        </ajaxtoolkit:AccordionPane>
        <ajaxtoolkit:AccordionPane ID="AccordionPane2" runat="server">
            <Header>
                Pane 2</Header>
            <Content>
                Content 2</Content>
        </ajaxtoolkit:AccordionPane>
        <ajaxtoolkit:AccordionPane ID="AccordionPane3" runat="server">
            <Header>
                Pane 3</Header>
            <Content>
                Content 3</Content>
        </ajaxtoolkit:AccordionPane>
    </Panes>
</ajaxtoolkit:Accordion>

Output:

You can see the output of above discussed code from the following link:

AJAX Accordion Control

Continue to next tutorial: AJAX Accordion Control Extender DataSource to learn how to bind the data retrieved from the SQL Database to the AJAX Accordion extender control.

9 Responses to "AJAX Toolkit Accordion Control Extender"
Jason
Hi pal,

Thanks for the codes.
I tried it in new website and it works perfectly.
But however, when i try to port it over to my project.
It became uncollapsible and unexpandable.
Kindly help to advise what is going wrong.
Thanks!

Regards,
Jason
tonny
Hello!
Is there a way that I can keep an accordiopane open while I open another? Or open all at the same time? I was looking at accordion class and there seems like it works with a pointer that indicates which accordion pane must be open then I lose my patience hehe. Teorically there must be a way to override the collapsePane method right?
Regards
Vivian
Hello! I would like to add more content to a panel,but when I put a <content> more content </ content> is only showing the latest content. <Header>Pane 1</Header> <Content> Content 1 </Content> <Content>more content</Content> Could you help me? Thanks.
Ezineasp.net
Hello Vivian Please send your code or tell the way you are trying to add the content into the Accordion control extender.
Vivian
Hello, I just added this line <Content> more content </ Content> in the first AccordionPane as below. <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server"> <Header> Pane 1 </ Header> <Content> Content 1 </ Content> <Content> More content </ Content> </ ajaxToolkit: AccordionPane> Is this correct? Thank you
Ezineasp.net
Hi Vivian Don't use multiple Content sections inside the AccordianPane extender. Try the following code: <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server"> <Header> Pane 1 </ Header> <Content> Content 1 <br /> More Content </ Content> </ ajaxToolkit: AccordionPane> You see there is only 1 content section having more content. Please note that AJAX Accordion extender can have multiple AccordionPane extenders inside the <Pane> template. Further you have to use only single Header and Content templates in each AccordionPane extender to display the Pane heading and content. Hope this will work for you. Good Luck
Vivian
Hi, Now worked. I understand. Thanks.
Pradeep Singh
It solve my Problem..

Thanx..
kirk
Can anyone tell me how to set accordion pane properties in c#. I don't want to create the accordion programatically but I do want to use c# to change some of the controls explicitly decalred properties eg ContentCssClass AutoSize RequireOpenedPane I have an accordion in a .ascx which is dynamically loaded when needed. I am having problems when I try to set propertie using the .ascx.cs that holds the Ajax Accordion Control. VS2010 intellisnse allows Accordion1.Height=500; // is allowed but changes nothing. Accordion1.AutoSize = "Limit"; // is not allowed with the message "Cannot implicitly convert type 'string' to AjaxControlKit.Autosize help!
Leave a Comment
* required
* required
* will not be published
* optional
* hint: http://www.example.com
  • Subscribe via Email