Accordion

Demo Page

The Accordion control represents a series of panes that can be viewed one at a time. The control is used to create "strongly typed" access to the AccordionBehavior. Its major purpose is to structure the content in a way that the AccordionBehavior can understand it.

Properties

Name	Description
AutoSize	Determines how to controll resizing of the Accordion. If it is set to None, then the Accordion can grow as large or as small as necessary. If it is set to Limit, then the Accordion will always be less than or equal to its Height. If it is set to Fill then it will always be equal to its height. The default is None.
ContentCssClass	The default Content CSS class
ContentTemplate	A template for the content of databound panes
Controls	Prevent the Controls property from appearing in the editor (so that people will use the Panes collection instead)
DataMember	A member in the DataSource to bind to
DataSource	The data source that provides data for populating the list of AccordionPanes
DataSourceID	The ID of the DataControl that this control should use to retrieve its data source. When the control is bound to a DataControl, it can retrieve a data source instance on demand, and thereby attempt to work in auto-DataBind mode.
FadeTransitions	Whether or not to use a fade effect when transitioning between selected Accordion Panes. The default is false
FramesPerSecond	The number of frames per second used in animation effects' transition. This is used to tune performance when using FadeTransition, a large number of Accordion Panes, etc. The default is 30.
HeaderCssClass	The default Header CSS class
HeaderSelectedCssClass	The default selected Header CSS Class
HeaderTemplate	A template for the Header of databound panes
Panes	A collection of child panes in the Accordion
RequireOpenedPane	Whether or not clicking the header will close the currently opened pane (leaving all the Accordion's panes closed). The default is true
SelectedIndex	Index of the AccordionPane to be displayed (this property must be set before OnPreRender). The default is 0
SuppressHeaderPostbacks	Whether or not we suppress the client-side click handlers of any elements (including server controls like Button or HTML elements like anchor) in the header sections of the Accordion. The default is false
TransitionDuration	Length of the transition animation in milliseconds. The default is 500

Methods

Name	Description
DataBind()	Bind the Accordion to its DataSource
FindControl(id)	Override FindControl to look first at this control, then check each of its child AccordionPanes for the control

Events

Name	Description
ItemCommand	An event to raise when a command is fired
ItemCreated	An event to raise when an item (i.e. Pane's Header or Content) is created during data binding
ItemDataBound	An event to raise when an item (i.e. Pane's Header or Content) is data bound

Client properties

Name	Description
autoSize	Controls how the Accordion changes its size to occupy space on a web page.
fadeTransitions	True - to use the fading transition effect for Accordion panes, false - for standard transitions.
framesPerSecond	The number of steps per second in transition animations. The default value is 30 frames per second.
headerCssClass	The name of the CSS class applied to headers.
headerSelectedCssClass	The name of the CSS class applied to the selected header.
requireOpenedPane	True - to force the Accordion to always have one pane expanded, false - to enable end-users to close all panes.
selectedIndex	The index of a pane selected to display its content.
suppressHeaderPostbacks	A Boolean value specifying whether the Accordion control will not be interrupted by the default click event of the anchor tag specified in the header element's template. If set to true, this property prevents any client event handler that may interrupt the activity of the Accordion control.
transitionDuration	The number of milliseconds a transition effect takes to complete. The default value is 250ms.

Client methods

Name	Description
addPane(header, content)	Creates a new Accordion pane and adds it to the Panes collection. The method provides references to the created pane's header and content DIVs.
getCount()	Returns the total number of panes.
getPane(index)	Returns an Accordion pane specified by its index. If no index is provided, the currently selected pane is returned.

Client events

Name	Description
selectedIndexChanged	Fires after a pane header is clicked and the Accordion changes the selected pane.
selectedIndexChanging	Fires after a pane header is clicked but before the Accordion changes the selected pane.

Client properties

autoSize

Controls how the Accordion changes its size to occupy space on a web page.

Remarks: If set to None, the Accordion grows/shrinks vertically without restriction when its pane is expanded/collapsed; this can cause other elements on a web page to move up and down with it. If set to Limit, the Accordion never grows larger than the value specified by its Height property; this will cause the Accordion content to scroll if it is too large to be displayed. If set to Fill, the Accordion always keeps the same size as its Height property. This will cause the content to be expanded or shrunk if it isn't of the right size.

Getter name: get_autoSize()

fadeTransitions

True - to use the fading transition effect for Accordion panes, false - for standard transitions.

Getter name: get_fadeTransitions()
Setter name: set_fadeTransitions(value)

framesPerSecond

The number of steps per second in transition animations. The default value is 30 frames per second.

Getter name: get_framesPerSecond()
Setter name: set_framesPerSecond(value)

headerCssClass

The name of the CSS class applied to headers.

Getter name: get_headerCssClass()
Setter name: set_headerCssClass(value)

headerSelectedCssClass

The name of the CSS class applied to the selected header.

Getter name: get_headerSelectedCssClass()
Setter name: get_headerSelectedCssClass(value)

requireOpenedPane

True - to force the Accordion to always have one pane expanded, false - to enable end-users to close all panes.

Getter name: get_requireOpenedPane()
Setter name: set_requireOpenedPane(value)

selectedIndex

The index of a pane selected to display its content.

Getter name: get_selectedIndex()
Setter name: set_selectedIndex(value)

suppressHeaderPostbacks

A Boolean value specifying whether the Accordion control will not be interrupted by the default click event of the anchor tag specified in the header element's template. If set to true, this property prevents any client event handler that may interrupt the activity of the Accordion control.

Getter name: get_suppressHeaderPostbacks()
Setter name: set_suppressHeaderPostbacks(value)

transitionDuration

The number of milliseconds a transition effect takes to complete. The default value is 250ms.

Getter name: get_transitionDuration()
Setter name: set_transitionDuration(value)

Methods

DataBind()

Bind the Accordion to its DataSource

FindControl(id)

Override FindControl to look first at this control, then check each of its child AccordionPanes for the control

Params:

• id
  • Type: String
  • Description: ID of the control to find

Client methods

addPane(header, content)

Creates a new Accordion pane and adds it to the Panes collection. The method provides references to the created pane's header and content DIVs.

Params:

• header

  • Type: Object
  • Description: header element of the new Accordion pane

• content

  • Type: Object
  • Description: content element of the new Accordion pane

getCount()

Returns the total number of panes.

getPane(index)

Returns an Accordion pane specified by its index. If no index is provided, the currently selected pane is returned.

Params:

• index
  • Type: Number
  • Description: index of the desired Accordion pane. If the index is not provided, we use the currently selected index. In the event the provided index (or the currently selected index) is outside the bounds of the panes collection, we return null.

Client events

selectedIndexChanged

Fires after a pane header is clicked and the Accordion changes the selected pane.

Add event handler method: add_selectedIndexChanged(handler)
Remove event handler method: remove_selectedIndexChanged(handler)
Raise event method: raise_selectedIndexChanged()

selectedIndexChanging

Fires after a pane header is clicked but before the Accordion changes the selected pane.

Add event handler method: add_selectedIndexChanging(handler)
Remove event handler method: remove_selectedIndexChanging(handler)
Raise event method: raise_selectedIndexChanging()