I get many (MANY) email from customers who are struggle to answer specific technical problems. As time permits I’m going to start answering them here,

I recently received an email from a developer building an application using the Ajax Control Toolkit and he needed his page to contain an Accordion Control in which all Panes were CLOSED when the page was initially loaded.

Like this ……

The Accordion Control in the earliest versions of the Ajax Control Toolkit lacked this ability but now it’s pretty easy.

By default, the Accordion Control requires one of it’s contained Panes must be open at all times.

So, there are two things we need to do in our Accordion Control configuration.

1. Configure the control so that it does NOT require at least one open Pane.
2. Set the default Pane index to one that does not exist so that NO Pane will be open when the page loads.

Luckily, the Control exposes the properties that we need.

Here is the control syntax.

<ajaxToolkit:Accordion ID="MyAccordion" runat="server" 
                       HeaderCssClass="accordionHeader" 
                       ContentCssClass="accordionContent" 
                       FadeTransitions="true" 
                       FramesPerSecond="40" 
                       TransitionDuration="250" 
                       AutoSize="None" 
                       RequireOpenedPane="false"
                       SelectedIndex="-1">   

The bottom two attributes are the ones that interest us.

RequireOpenPane=”false” – Tells the Accordion control that it’s OK for all the contained Panes to be closed. 

SelectedIndex=”-1” – Tells the Accordion control to set as Active the Panel whose index is –1 (which doesn’t exist”.

These two settings combine to offer the startup effect that you see in th epicture above.

[ Click HERE to download a sample project of this technique. ]