How-To Auto Collapse Microsoft AJAX Collapsible Panel

Here's a quick tip on how to automatically collapse a Collapsible Panel through code. This is useful in a situation such as having a Collapsible Panel that contains a few controls used in data entry and once the user has entered the data and clicked on a button to submit their data you want the panel to collapse automatically.

You would think that just performing a (control name) CollapsiblePanelExtender1.collapse = True would collapse the panel; however, this will not work by itself. This is due to the fact that there is a short delay between the first rendering of the page and the running of the Javascript to modify it. To have the panel collapse you will need to add one more line, so your code will look like this.

CollapsiblePanelExtender1.Collapsed = True;
CollapsiblePanelExtender1.ClientState = "true";

You can also prevent the PopControlExtender from briefly showing controls it contains by placing the controls within a Panel Control and setting the Panel Control's visibility style to hidden. This will stop the annoying flickering that happens when the page is first rendered.