Javascript error on $find for CollapsiblePanelExtender control for MasterPage scenario

Question

I have a content page and a user control. The usercontrol uses CollapsiblePanelExtender. I have written the following javascript function on "onmouseout" of the panel.

<script language="javascript" type="text/javascript">
function doToggle() 
{
var cpe = $find("CollapsiblePanelExtender1.ClientID");
//cpe._toggle();
if (!cpe.get_Collapsed()) { 
cpe._doClose();
}
}
</script>

This conent page is part of master page. When I run the code I get javascript error. cpe is always null. How to use $find for CPE for a master page scenario? I also tried document.getElementById and passed the client id, still it didn't work. Please help.

Answer 1

Problem resolved by adding BehaviorID="cpe" to CollapsiblePanelExtender.

<ajax:CollapsiblePanelExtender ID="cpe" runat="Server" BehaviorID="cpe"
    TargetControlID="SettingsContentPanel" CollapsedSize="0" Collapsed="True" ExpandControlID="SettingsTitlePanel"
    CollapseControlID="SettingsTitlePanel" ScrollContents="False" ImageControlID="btnSettingsPopup"
    SuppressPostBack="true" ExpandedImage="~/images/collapse.jpg" CollapsedImage="~/images/expand.jpg"
    ExpandDirection="Vertical" AutoCollapse="false" AutoExpand="false" />

And then $find function will be able to find the control, code like:

function doToggle() 
{
    var cpe = $find("cpe");
    if (!cpe.get_Collapsed())
    { 
        cpe._doClose();
    }
}