Sliding div panel goes back on clicking buttons inside div panel
<p>I am using this code to slide my div from right on (button_panel) button click, everything is working fine but when I click any button inside div panel the panel goes back to its original position. It shouldnt happen because the click event is used only for button_panel. Any idea why ?</p>

<pre><code>var sipPos = 0;
$(document).ready(function () {
    $("#button_panel").click(function (e) {
        e.preventDefault();
        $("#panel").animate({ right: sipPos }, 300, 'linear', function () {
            if (sipPos == 0) { sipPos = -150; }
            else { sipPos = 0; }
        });
    });
});

&lt;div id="panel" style=" border-style: solid; border-color: #008000; background-color:#D5FFD5; width:150px; height:400px; right:-150px; top:142px; position:absolute" align="center" &gt;
    &lt;asp:ImageButton ID="button_panel" runat="server"  style=" background-image: url('images/ProgressBar1.jpg'); width:80px; height:30px; left:-83px;  margin-top:-12px; position:absolute; top:0px" Font-Bold="True" ImageUrl="~/images/green_left_arrow_104.jpg" /&gt;
    &lt;asp:Label ID="Label6" runat="server" style="margin-top:5px"  Text="Timer" /&gt;&lt;br /&gt;
    &lt;asp:Button ID="Button1" runat="server" style="margin-top:5px" Text="AFK!" /&gt;&lt;br /&gt;
    &lt;asp:Button ID="Button2" runat="server" style="margin-top:5px" Text="REVIEW" /&gt;&lt;br /&gt;
&lt;/div&gt;
</code></pre>
