Enable CheckBox inside Collapsible Panel

I have created a collapsible panel where i need to have a CheckBox in the header like this

<asp:Panel ID="Panel2" runat="server" Height="20px" Width="350px" BackColor="Aqua">
    <asp:CheckBox ID="CheckBox2" runat="server"  />
     <asp:ImageButton ID="Image1" runat="server" ImageUrl="~/expand_blue.jpg"     AlternateText="(Show Details...)"/> 
     <div style="float: left;">What is ASP.NET AJAX?</div>
            <div 开发者_如何转开发style="float: left; margin-left: 20px;">
                <asp:Label ID="Label1" runat="server">(Show Details...)</asp:Label>
            </div>
     </asp:Panel>
<asp:Panel ID="Panel3" runat="server">
    My content<br />My content<br />My content<br />My content<br />My content<br />My content<br />My content<br />My content<br />My content<br />My content<br />My content<br />
    </asp:Panel>
    <asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender2" runat="server"
     TargetControlID="Panel3"
    ExpandControlID="Panel2"
    CollapseControlID="Panel2" 
    Collapsed="True"        
    ImageControlID="Image1"  

    ExpandedImage="~/collapse_blue.jpg"
    CollapsedImage="~/expand_blue.jpg"
    SuppressPostBack="true"
    SkinID="CollapsiblePanelDemo" >
    </asp:CollapsiblePanelExtender>

You can see I have kept panel2 as head and Panel3 as target.. and I have kept a CheckBox control inside Panel 2. Now the problem is I cannot CHECK the checkbox. When i CLick on it the Collapse and expand property is working. Is there any way that you can do this with keeping it inside that Panel itself?

---

set the tag SuppressPostBack for the extender

   SuppressPostBack="false"

and then try