Multiple CollapsiblePanelExtender use on same page but extend only one CollapsiblePanelExtender at a time

Quote:

First CollapsiblePanelExtender Control

<ajaxtoolkit:collapsiblepanelextender id="CollapsiblePanelExtender1" runat="server" behaviorid="PanelExtender1" xmlns:ajaxtoolkit="#unknown">
CollapseControlID="pnlClick" Collapsed="true" ExpandControlID="pnlClick" TextLabelID="lblMessage"
CollapsedText="Show" ExpandedText="Hide" ImageControlID="Image1" ExpandDirection="Vertical"
TargetControlID="pnldata" ScrollContents="false">



Second CollapsiblePanelExtender Control


<ajaxtoolkit:collapsiblepanelextender id="CollapsiblePanelExtender2" runat="server" behaviorid="PanelExtender2" xmlns:ajaxtoolkit="#unknown">
CollapseControlID="pnlClick1" Collapsed="true" ExpandControlID="pnlClick1" TextLabelID="lblMessage"
CollapsedText="Show" ExpandedText="Hide" ImageControlID="Image1" ExpandDirection="Vertical"
TargetControlID="pnldata" ScrollContents="false">



Both Collapse Extender have behaviour id which help to meet requirement that is if we use more than one collapse extender on same page then at a time only one extend and other is close.By using this script

<script>


function pageLoad(sender, args) {
extenders[0] = $find("PanelExtender1");
extenders[1] = $find("PanelExtender2");


// 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>