AJAX Toolkit Accordion Control Extender

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.

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>

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.