The sample shows how to modify accordion behavior or appearance using client side script.

List of the client-side options used in the sample:

• requireOpenedPane - determines whether clicking the header will close the currently opened pane (leaving all the accordion's panes closed);
• selectedIndex - the index of the currently expanded accordion pane;

List of the client-side methods used in the sample:

• add(header, content) - add an accordion pane to the end of the accordion;
• insert(index, header, content) - insert an accordion pane at the specified index;
• count() - gets the number of the accordion panes;
• removeAt(index) - remove the accordion pane by its index;
• clear() - remove all accordion panes.

The OnClientSelectedIndexChanged property is used to listen the selectedIndexChanged event on the client side:

<C1Accordion:C1Accordion runat="server" 
		ID="C1Accordion1" 		
		OnClientSelectedIndexChanged="onClientSelectedIndexChanged">
.....
</C1Accordion:C1Accordion>
<script language="javascript" type="text/javascript">
	function onClientSelectedIndexChanged(ev, args) {
		log.message("The new selectedIndex value is " + args.newIndex);
	}
</script>

The following code demonstrates how to add a new accordion pane using client-side script:

$("#<%=C1Accordion1.ClientID%>").c1accordion("add", "my header", "my content");