The following piece of code will allow you to have mutiple ASP.NET 2.0 Ajax CollapsiblePanelExtender controls on a single page and only one of them will be expanded at a time. You can use this to keep the page length short. You must set the BehaviorId of the CollapsiblePanelExtender, that is what the $find javascript function looks for. Make sure to add all the BehaviorIds to the array in the pageLoad function.
<script type="text/javascript">
// WWB: Handles Mutual Exclusive Expansion. Only One Extender Panel
// Can Be Open At A Time
var extenders = [];
function pageLoad(sender, args)
{
extenders[0] = $find("PanelExtender1");
extenders[1] = $find("PanelExtender2");
extenders[2] = $find("PanelExtender3");
// WWB: Hook All The Extenders, If extenders[i] is null then
// the extenders is not being displayed -- i.e. not visible
for (var i=0; i< extenders.length; i++)
if (extenders[i] != null)
extenders[i].add_expandComplete( expandHandler );
}
function expandHandler(sender, args)
{
for (var i=0; i< extenders.length; i++)
{
if ((extenders[i] != null) && (extenders[i] != sender))
extenders[i]._doClose();
}
}
</script>{6230289B-5BEE-409e-932A-2F01FA407A92}