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#  Copy Code
  AccordionItem item = new AccordionItem(); item.ID = "AccordionItem" + Accordion1.Items.Count + 1; item.Title = "Server item"; Accordion1.Items.Add(item); Accordion1.DataBind();

  
  

  VB.NET  Copy Code
  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#  Copy Code
  Accordion1.Items.Remove(Accordion1.Items[0]); Accordion1.DataBind();

  
  

  VB.NET  Copy Code
  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  Copy Code
  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  Copy Code
  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  Copy Code
  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  Copy Code
  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.