Setting Accordion for Closed Panels on Startup

The Accordion in the ASP.NET AJAX Control Toolkit is a very useful tool which creates collapsible panels that open like an accordion when you click on the header. This is a good way to put content on a web page without taking up a lot of space on the page.

The problem with this control is that the first panel is always open. This doesn’t matter if you have multiple panels in the control, but if you just have one panel it doesn’t work well. With a single panel, it should be initially closed until you click on its header.

You can get the Accordion to default as completely closed by setting the SelectedIndex property to –1. The default setting is 0 which opens the first panel when the page is loaded. When you set it to –1, all of the panels will be closed until you click on its header. This setting makes it ideal for single panel use of this web control.