Home / AJAX

HOW TO Use the Accordion Control

RSS
Modified on 2010/01/26 16:55 by Stephen Walther Categorized as Uncategorized

Accordion Demonstration

Click the headers to expand different accordion panes.



Header 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.

Header 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.

Header 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.


Accordion Description

The Accordion control lets you define multiple panes and display them one at a time. It is like having several CollapsiblePanel controls where only one can be expanded at a time. The Accordion control contains one or more AccordionPane controls. Each AccordionPane control has a template for its header and its content. The selected pane is automatically persisted across postbacks.

The Accordion control supports the following AutoSize modes to accommodate a variety of page layouts.

  • None - The Accordion control grows and shrinks without restriction. This can cause other elements on the page to move up and down in order to accommodate the Accordion control.
  • Limit - The Accordion control never grows larger than the value specified by its Height property. This causes the content to scroll if the content is too long to be displayed in the allotted space.
  • Fill - The Accordion control is a fixed size as specified in its Height property. This causes the content to be expanded or shrunk if the content does not fit exactly into the allotted space.

Like most of the extenders in the AJAX Control Toolkit, the Accordion control is written using an extender. The extender requires input in a specific hierarchy of container elements (like div elements). Therefore, the Accordion and AccordionPane controls are used to generate the expected input for the extender. The extender can also be used on its own if you provide appropriate input.

The Accordion control can also be data-bound. To bind the control, specify a data source using the DataSource or DataSourceID properties, and then set the data items in the HeaderTemplate and ContentTemplate properties. You must call the DataBind method to bind the control to the data.

Video - How Do I: Use the ASP.NET AJAX Accordion Control?



Accordion Client Code Sample

    <style type="text/css">
        #accordion {
            width: 400px;
            border: solid 1px black;
        }

.content { padding: 4px; } .selectedheader { color: White; background-color: Blue; padding: 4px; border: solid 1px black; } .header { color: White; background-color: Navy; padding: 4px; border: solid 1px black; } </style> <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/beta/0911/extended/ExtendedControls.debug.js" type="text/javascript"></script>

<script type="text/javascript"> Sys.require(Sys.components.accordion, function() { $("#accordion").accordion({ HeaderCssClass: "header", HeaderSelectedCssClass: "selectedheader" }); }); </script> <div id="accordion"> <div>Header 1</div> <div class="content"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. </p> <p> Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. </p> <p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. </p> </div> <div>Header 2</div> <div class="content"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. </p> <p> Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. </p> <p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. </p> </div> <div>Header 3</div> <div class="content"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. </p> <p> Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. </p> <p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. </p> </div> </div>


Accordion Client Reference

Sys.Extended.UI.AccordionBehavior Class

Events

  • selectedIndexChanging - Adds or removes an event handler for the selectedIndexChanging event.
  • selectedIndexChanged - Adds or remove an event handler for the selectedIndexChanged event.

Methods

  • initialize() - Returns the selected index from the ClientState mechanism and loops through the children of the behavior's target to find all the Accordion control's child panes. The method builds a collection of the panes from the headers and content sections. It then hides all the content sections that aren't selected and initializes the layout.
  • addPane(header, content) - Creates a new AccordionPane object using the specified references to its header and content div elements and adds the new pane to the _panes collection. It also wraps the content div element in a new container div element and adds a click handler to the header div element.
    • Parameters - System.UI.DomElement header, Sys.UI.DomElement content.
    • Returns - An object.
    • Remarks - The new pane object is added to the end of the Accordion control's _pane collection. The pane is an object of the form {header, content, animation} that corresponds to that pane's header section, content section, and the animation that is used to open and close its content section. The content element is a new div element that has been created to wrap the original div element. This makes it possible to completely collapse it, even if it has padding, margins, etc. This is pointed to by a dynamic _original property. The header element has a dynamic _index property that indicates its position in the Accordion control's pane collection, and that is used primarily by the headers' shared click handler. The animation will either be an instance of LengthAnimation or ParallelAnimation. If it is an instance of ParallelAnimation, it will have two children, which are instances of LengthAnimation and FadeAnimation. There will be two dynamic properties (_length and _fade) that point to each of these children to let you easily set the length and fadeEffect properties. There is also a dynamic _ended property, which is an event handler that is called when the animation is complete, a dynamic _opening property to indicate whether the animation was opening or closing the pane, and a dynamic _pane property to provide a reference to the pane that was being animated.
  • dipose() - Disposes the AccordionBehavior object.
  • raiseSelectedIndexChanging(eventArgs) - Raises the selectedIndexChanging event.
    • Parameters - Sys.Extended.UI.AccordionSelectedIndexChangeEventArgs eventArgs.
  • raiseSelectedIndexChanged(eventArgs) - Raises the selectedIndexChanged event.
    • Parameters - Sys.Extended.UI.AccordionSelectedIndexChangeEventArgs eventArgs.

Properties

  • Pane - Gets an AccordionPane object using the specified index. If no index is provided, gets the currently selected pane.
    • Parameters - The index of the AccordionPane object to get. This value can be null. If no index is specified, the index of the currently selected pane is used. If the specified index or the currently selected index is outside the bounds of the panes collection, returns null.
    • Returns - Object.
  • Count - Gets the number of AccordionPane objects.
  • TransitionDuration - Gets or sets the length of time to use to transition between Accordion sections in milleseconds. The default is 250.
  • FramesPerSecond - Gets or sets the number of steps per second in the transition animations. The default value is 30.
  • FadeTransitions - Gets or sets a Boolean value that determines whether to fade the accordion panes when transitioning.
  • HeaderCssClass - Gets or sets the CSS class that is applied to each header.
  • HeaderSelectedCssClass - Gets or sets the CSS class that is applied to the selected header.
  • AutoSize - Gets or sets the AutoSize mode, using a value from Sys.Extended.UI.AutoSize.
  • SelectedIndex - Gets or sets the index of the currently selected section.
  • requireOpenedPane - Gets or sets a Boolean value that specifies whether clicking the header closes the currently opened pane (which leaves all the Accordion control's panes closed).
  • suppressHeaderPostbacks - Gets or sets a Boolean value that specifies whether to suppress the client-side click handlers for any elements (including server controls like Button or HTML elements like an anchor) in the header sections of the Accordion control.
    ====Sys.Extended.UI.AutoSize Enum====
  • None : 0
  • Fill : 1
  • Limit : 2

Sys.Extended.UI.AccordionSelectedIndexChangeEventArgs Class

Properties

  • oldIndex - Gets or sets the last selected index.
  • selectedIndex - Gets or sets the new selected index.

Accordion Server Code Sample

        <ajaxToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0"
            HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected"
            ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="40" 
            TransitionDuration="250" AutoSize="None" RequireOpenedPane="false" SuppressHeaderPostbacks="true">
           <Panes>
            <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
                <Header><a href="" class="accordionLink">1. Accordion</a></Header>
                <Content>
                    The Accordion control lets you provide multiple panes and display them one at a time.
                    It is like having several <asp:HyperLink runat="server" NavigateUrl="~/CollapsiblePanel/CollapsiblePanel.aspx" Text="CollapsiblePanel" />
                    controls where only one can be expanded at a time. The Accordion control is implemented as a control that contains
                    one or more <b>AccordionPane</b> controls. Each <b>AccordionPane</b> control has a template for its header and its content.
                    The selected pane is automatically persisted across postbacks.
                </Content>
            </ajaxToolkit:AccordionPane>
            <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
                <Header><a href="" class="accordionLink">2. AutoSize</a></Header>
                <Content>
                    <p>The Accordion control supports the following '''AutoSize''' modes to accommodate a variety of page layouts.</p>

<ul> <li><b>None</b> - The Accordion control grows and shrinks without restriction. This can cause other elements on the page to move up and down in order to accommodate the Accordion control.</li> <li><b>Limit</b> - The Accordion control never grows larger than the value specified by its <b>Height</b> property. This causes the content to scroll if the content is too long to be displayed in the allotted space.</li> <li><b>Fill</b> - The Accordion control is a fixed size as specified in its <b>Height</b> property. This causes the content to be expanded or shrunk if the content does not fit exactly into the allotted space.</li> </ul> </Content> </ajaxToolkit:AccordionPane> <ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server"> <Header><a href="" class="accordionLink">3. Control or Extender</a></Header> <Content> Like most of the extenders in the AJAX Control Toolkit, the Accordion control is written using an extender. The extender requires input in a specific hierarchy of container elements (like <b>div</b> elements). Therefore, the Accordion and AccordionPane controls are used to generate the expected input for the extender. The extender can also be used on its own if you provide appropriate input. </Content> </ajaxToolkit:AccordionPane> <ajaxToolkit:AccordionPane ID="AccordionPane4" runat="server"> <Header><a href="" class="accordionLink">4. What is ASP.NET AJAX?</a></Header> <Content> <asp:Image ID="Image1" runat="server" ImageUrl="~/images/AJAX.gif" AlternateText="ASP.NET AJAX" ImageAlign="right" /> <%= GetContentFillerText()%> </Content> </ajaxToolkit:AccordionPane> </Panes> </ajaxToolkit:Accordion>

Accordion Server Reference

The properties listed in italic are optional:



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

  • SelectedIndex - The AccordionPane object that is visible.
  • HeaderCssClass - The name of the CSS class to use for the headers. This can be either applied to the Accordion control as a default for all AccordionPane objects, or it can be applied to an individual AccordionPane object.
  • HeaderSelectedCssClass - The name of the CSS class to use for the selected header. This can be either applied to the Accordion control as a default for all AccordionPane objects, or it can be applied to an individual AccordionPane object.
  • ContentCssClass - The name of the CSS class to use for the content. This can be either applied to the Accordion control as a default for all AccordionPane objects, or it can be applied to an individual AccordionPane object.
  • FadeTransitions - true to use the fading transition effect; otherwise, false.
  • TransitionDuration - The number of milliseconds to use to animate the transitions.
  • FramesPerSecond - The number of frames per second to use for the transition animations.
  • AutoSize - A value that specifies how to restrict the layout of the Accordion control. The values for the AutoSize enumeration are described earlier in this page.
  • RequireOpenedPane - A value that specifies that the currently opened pane does not close when its header is clicked (which ensures one pane is always open). The default is true.
  • SuppressHeaderPostbacks - A value that specifies whether the client-side click handlers of elements inside a header are called. This is useful when you want to include hyperlinks in the headers for accessibility.
  • Panes - The collection of AccordionPane controls.
  • HeaderTemplate - The element that contains markup that should be used for an pane's header when data binding.
  • ContentTemplate - The element that contains the markup that is displayed for a pane's content during data binding.
  • DataSource - The data source to use. You must call the DataBind method in order for the control to read (or reread) data from this data source.
  • DataSourceID - The ID of the data source to use.
  • DataMember - The member to bind to when using a DataSourceID value for data binding.

Accordion Additional Code Samples