asp.net jquery and update panel problem

asp.net jquery and update panel problem

im slightly new to jquery and im currently trying to make a table that is collapsible when the heading is clicked right now i have a div tag for the header and a div tag around the table so i can have it toggle. im currently using updatepanels for each table so each table is editable to database seperately without a postback. im having a problem getting it to work on an update though im using the javascript below which gives me a bug. when i click the edit button on a table section it causes an update and when i cancel and try to click another row it toggles it twice the time im clicking the button like a bouncing effect. i knows its because the javascript is calling the next panel and adding the effect but if you click a different header then the one update it adds the effect twice. if anyone had any help or suggestions it would e very much appreciated
 

  1. function

     pageLoad() {

    $(

    ".header").click(function() {

    var clicked = document.getElementById(id);

    alert(id);

    $(

    this).find('a').slice(0, 1).toggleClass("collapsed");

    $(

    this).next(".panel").eq(0).slideToggle(500);

    });

    $(document).ready(

    function() {

    $(

    "tr").mouseover(function() {

    $(

    this).addClass("over");

    }

    ).mouseout(

    function() {

    $(

    this).removeClass("over");

    }

    );

    $(

    "tr:even").addClass("alt");

    });

    }

  2. <div class="header">

    <a class="collapse">[-]</a>

    <a>Customer Information</a>

    <div class="button">

    <asp:Button ID="btnCustomer_Edit" runat="server" text="Edit" />

    <asp:Button ID="btnCustomer_Save" runat="server" Text="Save" />

    <asp:Button ID="btnCustomer_Update" runat="server" Text="Update" />

    <asp:Button ID="btnCustomer_Cancel" runat="server" Text="Cancel" />

    </div>

    </div>

    <div class="panel">

    <table id="tablea" class="stripes" runat="server" cellpadding="0" cellspacing="1">

    <tr>

    <td class="style1">Customer ID:</td>

    <td>

    <asp:Label ID="lblCustomerID" runat="server" />

    <asp:TextBox ID="txtCustID" runat="server" ></asp:TextBox>

    </td>

    <td class="style1">Entry Date: </td>

    <td>

    <asp:Label ID="lblEntry" runat="server" />

    <asp:TextBox ID="txtEntry" runat="server" ></asp:TextBox>

    </td>

    </tr>

    <tr>

    <td class="style1">Company Name:</td>

    <td>

    <asp:Label ID="lblCompanyName" runat="server" />

    <asp:TextBox ID="txtCompanyName" runat="server" ></asp:TextBox>

    </td>

    <td class="style1">Status:</td>

    <td>

    <asp:Label ID="lblStatus" runat="server" />

    <asp:TextBox ID="txtStatus" runat="server" ></asp:TextBox>

    </td>

    </tr>

    <tr>

    <td class="style1">Tax ID: </td>

    <td>

    <asp:Label ID="lblTaxID" runat="server" />

    <asp:TextBox ID="txtTaxID" runat="server" ></asp:TextBox>

    </td>

    <td class="style1">Removal Date:</td>

    <td>

    <asp:Label ID="lblRemoval" runat="server" />

    <asp:TextBox ID="txtRemoval" runat="server" ></asp:TextBox>

    </td>

    </tr>

    </table>

    </div>