Programmatically open and close Accordion Panes

If you have an AJAX page in ASP.NET that contains an Accordion control, you may find you want to open and close the different panes from events other than clicking on the header. You can set the SelectedIndex property of the Accordion in your code-behind, but this does not use smooth transitions. However, you can use javascript to invoke the set_SelectedIndex method, which will contract the currently-expanded pane and expand the new one. Tip 3 on this page…

http://www.dotnetcurry.com/ShowArticle.aspx?ID=215

…shows you how to do that.

However, if you are using Master pages, the ID of the Accordion control will be different and so you will need to set this programmatically in code. Create a Sub like this…

Private Sub AccordionTransition()
If Not Page.ClientScript.IsClientScriptBlockRegistered(“changeSelectedScript”) Then
Dim t As Type
t = Me.GetType() ‘type of page
Page.ClientScript.RegisterClientScriptBlock(t, “changeSelectedScript”, _
”  function changeSelected(idx) {” & Environment.NewLine & _
”   $find(‘” & Me.MyAccordion.ClientID & “_AccordionExtender’).set_SelectedIndex(idx);” & Environment.NewLine & _
“}”, True)
End If
End Sub

… and then call this sub in your Page_Load. Note that my Accordion control is called ‘MyAccordion’ and will need to be changed, or you can make this sub more generic and pass the control ID in like this:

Private Sub AccordionTransition(ByVal ctlAccordion As WebControl)
If Not Page.ClientScript.IsClientScriptBlockRegistered(“changeSelectedScript”) Then
Dim t As Type
t = Me.GetType() ‘type of page
Page.ClientScript.RegisterClientScriptBlock(t, “changeSelectedScript”, _
”  function changeSelected(idx) {” & Environment.NewLine & _
”   $find(‘” & ctlAccordion.ClientID & “_AccordionExtender’).set_SelectedIndex(idx);” & Environment.NewLine & _
“}”, True)
End If
End Sub

Finally, to use this on your webpage, you will need to add an OnClientClick event to whichever control(s) you want to invoke the Accordion expension/contraction. So for instance, with a button you would need:

<asp:Button ID=”Button1″ runat=”server” Text=”Accordion Change” OnClientClick=”changeSelected(1); ” />

The number that is passed into the changeSelected function is the index of the accordion pane you wish to expand. The selected pane expands and any further processing you have set up for that button will continue in the code-behind. If you did not want anything else to occur in the code-behind, you would return a false event value in the click event as well:

<asp:Button ID=”Button2″ runat=”server” Text=”Accordion Change” OnClientClick=”changeSelected(1); event.returnValue=false; return false;” />

Finally, you can also set up the click event in the code behind by adding attributes to the control at Page_Load, such as:

Button2.Attributes.Add(“onclick”, “javascript: changeSelected(1);”)

This could give you more control, for instance if you were using a gridview and wanted to set particular actions for each row.