Accordion

The Accordion control represents a container of items, which can be expanded and collapsed. The AccordionItem control derives from WindowBase and represents a window with header and content. Only one of the items in the Accordion control can be expanded at a time.

Server side

Accessing items

Use the Items property to get a reference to the control's collection of AccordionItems.

Changing the expanded item

Set the SelectedIndex property to expand the corresponding item. If the SelectedIndex is set to -1 all items will be collapsed.

Adding items

Use Accordion.Items.Add method to add a new item to the collection.

C#

AccordionItem item = new AccordionItem();
item.ID = "AccordionItem" + Accordion1.Items.Count + 1;
item.Title = "Server item";
Accordion1.Items.Add(item);
Accordion1.DataBind();

VB.NET

Dim item As New AccordionItem()
item.ID = "AccordionItem" + Accordion1.Items.Count & 1
item.Title = "Server item"
Accordion1.Items.Add(item)
Accordion1.DataBind()

Removing items

Use Accordion.Items.Remove or Accordion.Items.RemoveAt to remove a specified item from the collection.

C#

Accordion1.Items.Remove(Accordion1.Items[0]);
Accordion1.DataBind();

VB.NET

Accordion1.Items.Remove(Accordion1.Items(0))
Accordion1.DataBind()

Events

The following events are exposed by the Accordion control.

Event	Event arguments	Description
SelectedIndexChanged	System.EventArgs	Raised when the value of the SelectedIndex property has changed.
Selected	AccordionEventArgs	Raised when a item is selected.
Deselected	AccordionEventArgs	Raised when a item is deselected.
AccordionItemCreated	AccordionItemEventArgs	Raised when an AccordionItem is created.
AccordionItemDeleted	AccordionItemEventArgs	Raised when an AccordionItem is deleted.

Client side

Getting a reference to the control

You can access the control on the client side by its ClientID.

JavaScript

var accordion = $find("Accordion1");
var accordion = $find("<%= Accordion1.ClientID %>");

Accessing items

Use the getAllItems method to get a reference to the control's items array. Use the getActiveItem method to access the currently expanded item.

Changing the expanded item

Use the selectItem method to expand the specified item.

JavaScript

accordion.selectItem(accordion.getAllItems()[0]);

Adding items

Use the Accordion.createItem method to add a new item to its items array. The createItem method accepts as parameter a JSON object, containing the data for the new item. Use the data object to define values for the properties and events, exposed by the AccordionItem class.

JavaScript

accordion.createItem({ properties: {title: "Client item"}, events: {headerClick: onItemHeaderClick} });

Removing items

Use the Accordion.deleteItem method to remove a specified item from the array.

JavaScript

accordion.deleteItem(accordion.getActiveItem());

Events

The following client-side events are exposed by the Accordion class.

Event	Event arguments	Script property	Description
controlLoaded	-	ControlLoadedScript	Raised just after the control has finished loading and is ready for interaction.
itemChanging	ItemChangingEventArgs	ActiveItemChangingScript	Raised when the expanded item in the Accordion control is about to be changed.
itemChanged	ItemChangedEventArgs	ActiveItemChangedScript	Raised when the expanded item in the Accordion control has changed.

The following client-side events are exposed by the AccordionItem class.

Event	Event arguments	Script property	Description
headerClick	ItemEventArgs	HeaderClickScript	Raised when the user clicks the header of the control.
frameLoaded	-	FrameLoadedScript	Raised when the internal iframe has finished loading.
controlLoaded	-	ControlLoadedScript	Raised just after the control has finished loading and is ready for interaction.