Plus and minus image is not showing in nested grid after expanding and collapsing

See more:

C#

ASP.NET

Javascript

Hi...The code is working fine.. whenever I'm clicking + image it's expanding child grid.

But the problem once the page is loaded after view button....the plus image is showing... after expanding the grid it is not displaying the minus image and again if i'm collapsing the image is not back to plus image... It's displaying like not supported images..

Can any give solution...

This is My code....

What I have tried:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
    $("[src*=plus]").live("click", function () {
        $(this).closest("tr").after("<tr><td></td><td >" + $(this).next().html() + "</td></tr>")
        $(this).attr("src", "~/Images/minus.png");
    });
    $("[src*=minus]").live("click", function () {
        $(this).attr("src", "~/Images/plus.png");
        $(this).closest("tr").next().remove();
    });
</script>

ASP CODE

<asp:GridView ID="GvDetailPrimary" runat="server" AutoGenerateColumns="false" DataKeyNames="UHIDNO"
             CssClass="table table-striped table-bordered table-hover" EditRowStyle-HorizontalAlign="Center" OnRowDataBound="gvDetailReport_rowdatabound">

           <Columns>

               <asp:TemplateField HeaderText="" ItemStyle-HorizontalAlign="Center" >
                <ItemTemplate>

                    <asp:Image ID="img_expand" runat="server" style="cursor: pointer" ImageUrl="~/Images/plus.png" />
                    <asp:Panel ID="pnldepend" runat="server" Style="display: none">

                      <asp:GridView ID="GvDetailDepend" runat="server" AutoGenerateColumns="false" CssClass = "table table-striped table-bordered table-hover">
                           <Columns>
                                 <asp:TemplateField HeaderText="Dependents" Visible="TRUE" ItemStyle-HorizontalAlign="Center" >
                                 <ItemTemplate>
                                      <asp:Label ID="lbldepname" runat="server" Text='<%#Eval("Membername") %>' Width="20%" align="center"></asp:Label>
                                 </ItemTemplate>
                                 </asp:TemplateField>

                                 <asp:TemplateField HeaderText="Age" Visible="TRUE" ItemStyle-HorizontalAlign="Center" >
                                 <ItemTemplate>
                                      <asp:Label ID="lbldepage" runat="server" Text='<%#Eval("age") %>' Width="20%" align="center"></asp:Label>
                                 </ItemTemplate>
                                 </asp:TemplateField>

                             </Columns>
                          </asp:GridView>

                      </asp:Panel>
              </ItemTemplate>
              </asp:TemplateField>

        <asp:TemplateField HeaderText="UHIDNO" ItemStyle-HorizontalAlign="center">
               <ItemTemplate>
                   <asp:Label ID="lbluhidno" runat="server" Text='<%#Eval("UHIDNO") %>' align="center"></asp:Label>
               </ItemTemplate>
               </asp:TemplateField>
 </Columns>
         </asp:GridView>

Code behind in onrowdatabound

protected void gvDetailReport_rowdatabound(object sender, GridViewRowEventArgs e)
 {
     SqlDataReader objSqlDataReader = null;
     try
     {

         if (e.Row.RowType == DataControlRowType.DataRow)
         {

             Label uhid = (Label)e.Row.FindControl("lbluhidno");

             GridView gridbind = (GridView)e.Row.FindControl("GvDetailDepend");
             objSqlDataReader = SP.DMLQuery_DetailReportDepen(uhid.Text);
             DataTable dt = new DataTable();
             dt.Load(objSqlDataReader);
             if (dt.Rows.Count > 0)
             {
                 gridbind.DataSource = dt;
                 gridbind.DataBind();
             }

         }
     }

     catch (Exception ex)
     {
         oErrorLog.WriteErrorLog(ex.ToString());
     }

  }