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