How do I have multiple close buttons with a CollapsiblePanelExtender?

Question

I have an asp.net ajax CollapsiblePanelExtender control on my page. The way this control is designed, you can specify one control to open the panel and another control to close it:

<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server"
  TargetControlID="panelStuff"
  ExpandControlID="butToggle" CollapseControlID="butToggle" Collapsed="True"
  SuppressPostBack="true" />

If ExpandControlID and CollapseControlID are identical, as they are in this example, then the control toggles the panel open and closed.

But what I would like is another control (within panelStuff) that allows the user to close this panel. Ideally, I would like to specify:

CollapseControlID="butToggle,butClose"

Any ideas how to do this?

Answer 1

One way to achieve this:

Assign a BehaviorID to the CollapsiblePanelExtender:

<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server" 
  BehaviorID="cpeForBehavior"
  TargetControlID="panelStuff"
  ExpandControlID="butToggle" CollapseControlID="butToggle" Collapsed="True"
  SuppressPostBack="true" />

Create javascript function to execute desired behavior:

function closeCpe() {
    $find("cpeForBehavior")._doClose();
}

Execute function in event handler:

<input type="button" id="MyOtherButton" onclick="closeCpe();" />