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();" />

Answer 2

Same as answer above but I was looking for a toggle. _doToggle() would not work, so just for reference:

 function closeCpe() {
            var cpe = $find("cpeForBehavior");

            if (cpe.get_Collapsed()) {
                cpe._doOpen();
            }
            else {
                cpe._doClose();
            }
        }