How to programmatically control which panel is expanded in ASP.NET Ajax Accordion using client-side code

Other Questions JavaScript
1

I’m working with an ASP.NET Ajax Accordion control and need to programmatically expand a specific panel using client-side JavaScript. I’ve tried using the set_SelectedIndex method but it doesn’t seem to work properly.

Has anyone successfully changed the active accordion panel from JavaScript? I’m looking for:

  • Working examples of selecting accordion panels via JavaScript
  • Documentation or resources showing available client-side methods for the Accordion control
  • Best practices for manipulating accordion state from the browser

Any code samples or guidance would be really helpful. I need to trigger the panel change based on user interactions that happen outside the accordion itself.

2

Had this same problem a few months ago. The trick is making sure the accordion’s fully loaded before you try calling any client-side methods. The set_SelectedIndex method works fine, but timing matters big time. Call it in window.onload or use the accordion’s OnClientLoad event. Also, grab the accordion reference with $find() using the ClientID - not the server control ID. I wrapped my call in setTimeout with a tiny delay when I needed it right after page load, and that fixed it. Once you’ve got the right reference, it’s simple: accordionControl.set_SelectedIndex(panelIndex). Just remember the panelIndex starts at zero.

3

Use get_Pane() with set_SelectedIndex() - that’s what worked for me when my accordion wouldn’t respond to index changes. First check if the pane exists with get_Pane(index) before selecting it. Also verify your accordion behavior is registered properly - script loading issues can break the client-side object. Call your JavaScript after Sys.Application.load fires, not just document ready. Watch out for disabled panes - they mess with indexing. I always iterate through get_Panes() first to confirm the structure matches what I expect before selecting panels programmatically.

4

Check if you’ve got an UpdatePanel around the accordion - that’s what broke mine last year. Had to move the javascript call to pageLoad instead of DOM ready. Also make sure you’re not calling it during partial postback or it gets weird. Try var acc = $find('<%=Accordion1.ClientID%>'); acc.set_SelectedIndex(2); - worked perfectly when I needed external buttons to trigger panel changes.

5

This topic was automatically closed 6 hours after the last reply. New replies are no longer allowed.