Accordion Sample

Accordion Demonstration

The Accordion is a web control that allows you to provide multiple panes and display them one at a time. It is like having several CollapsiblePanels where only one can be expanded at a time. The Accordion is implemented as a web control that contains AccordionPane web controls. Each AccordionPane control has a template for its Header and its Content. We keep track of the selected pane so it stays visible across postbacks.

2. AutoSize

It also supports three AutoSize modes so it can fit in a variety of layouts.

None - The Accordion grows/shrinks without restriction. This can cause other elements on your page to move up and down with it.
Limit - The Accordion never grows larger than the value specified by its Height property. This will cause the content to scroll if it is too large to be displayed.
Fill - The Accordion always stays the exact same size as its Height property. This will cause the content to be expanded or shrunk if it isn't the right size.

3. Control or Extender

The Accordion is written using an extender like most of the other extenders in the AJAX Control Toolkit. The extender expects its input in a very specific hierarchy of container elements (like divs/spans), so the Accordion and AccordionPane web controls are used to generate the expected input for the extender. The extender can also be used on its own if you provide it appropriate input.

4. What is ASP.NET AJAX?

ASP.NET AJAX is a free framework for building a new generation of richer, more interactive, highly personalized cross-browser web applications. This new web development technology from Microsoft integrates cross-browser client script libraries with the ASP.NET 2.0 server-based development framework. In addition, ASP.NET AJAX offers you the same type of development platform for client-based web pages that ASP.NET offers for server-based pages. And because ASP.NET AJAX is an extension of ASP.NET, it is fully integrated with server-based services. ASP.NET AJAX makes it possible to easily take advantage of AJAX techniques on the web and enables you to create ASP.NET pages with a rich, responsive UI and server communication. However, AJAX isn't just for ASP.NET. You can take advantage of the rich client framework to easily build client-centric web applications that integrate with any backend data provider and run on most modern browsers.

Fade Transitions:
AutoSize:

Accordion Known Issues

If you place the Accordion inside a <table> tag and have FadeTransitions set to true in Internet Explorer 6, it will affect the spacing between Accordion Panes.

Also, when viewing the demo in Internet Explorer 6, maximizing the browser at higher resolutions like 1600 x 1200 will cause the transitions to animate slower than at lower resolutions like 1280 x 1024.

Accordion Description

It also supports three AutoSize modes so it can fit in a variety of layouts.

None - The Accordion grows/shrinks without restriction. This can cause other elements on your page to move up and down with it.
Limit - The Accordion never grows larger than the value specified by its Height property. This will cause the content to scroll if it is too large to be displayed.
Fill - The Accordion always stays the exact same size as its Height property. This will cause the content to be expanded or shrunk if it isn't the right size.

The Accordion can also be databound. Simply specify a data source through the DataSource or DataSourceID properties and then set your data items in the HeaderTemplate and ContentTemplate properties.

Accordion Properties

The control above is initialized with this code. The italic properties are optional:

 <ajaxToolkit:Accordion
    ID="MyAccordion"
    runat="Server"
    SelectedIndex="0"
    HeaderCssClass="accordionHeader"
    ContentCssClass="accordionContent"
    AutoSize="None">
    FadeTransitions="true"
    TransitionDuration="250"
    FramesPerSecond="40"
    <Panes>
        <ajaxToolkit:AccordionPane
            HeaderCssClass="accordionHeader"
            ContentCssClass="accordionContent">
            <Header> . . . </Header>
            <Content> . . . </Content>
        </ajaxToolkit:AccordionPane>        
        .
        .
        .
    </Panes>            
    <HeaderTemplate>...</HeaderTemplate>            
    <ContentTemplate>...</ContentTemplate>               
</ajaxToolkit:Accordion>

SelectedIndex - The AccordionPane to be initially visible
HeaderCssClass - Name of the CSS class to use for the headers. This can be either applied to the Accordion as a default for all AccordionPanes, or an individual AccordionPane.
ContentCssClass - Name of the CSS class to use for the content. This can be either applied to the Accordion as a default for all AccordionPanes, or an individual AccordionPane.
FadeTransitions - True to use the fading transition effect, false for standard transitions.
TransitionDuration - Number of milliseconds to animate the transitions
FramesPerSecond - Number of frames per second used in the transition animations
AutoSize - Restrict the growth of the Accordion. The values of the AutoSize enumeration are described above.
Panes
HeaderTemplate - The Header template contains the markup that should be used for an pane's header when databinding
ContentTemplate - The Content template contains the markup that should be used for a pane's content when databinding
DataSource - The data source to use. DataBind() must be called.
DataSourceID - The ID of the data source to use.
DataMember - The member to bind to when using a DataSourceID