Close (Collapse) nested GridView when another is opened (expanded) using jQuery in ASP.Net

Hi jochk12345,

Check the below sample.

I have used Customers and Orders Table of Microsoft's Northwind Database which you can easily download using the link provided below.

Install Microsoft Northwind and Pubs Sample databases in SQL Server Management Studio

HTML

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" DataKeyNames="CustomerID"
    CssClass="Grid" OnRowDataBound="GridView1_RowDataBound">
    <Columns>
        <asp:TemplateField ItemStyle-Width="20px">
            <ItemTemplate>
                <a>
                    <img alt="City" id="imgdiv<%# Eval("CustomerID") %>" src="../pics/plus.png" width="20px">
                </a>
                <div id="div<%# Eval("CustomerID") %>" style="display: none;">
                    <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false" DataKeyNames="CustomerID" AllowPaging="true" PageSize="5"
                        CssClass="ChildGrid">
                        <Columns>
                            <asp:BoundField ItemStyle-Width="150px" DataField="OrderID" HeaderText="Order Id" />
                            <asp:BoundField ItemStyle-Width="150px" DataField="OrderDate" HeaderText="Date" />
                        </Columns>
                    </asp:GridView>
                </div>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField ItemStyle-Width="150px" DataField="ContactName" HeaderText="Contact Name" />
        <asp:BoundField ItemStyle-Width="150px" DataField="City" HeaderText="City" />
    </Columns>
</asp:GridView>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("[src*=plus]").live("click", function () { 
            var clicked = $(this).attr('id');
            $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).closest('a').next().html() + "</td></tr>")
            $(this).attr("src", "../pics/minus.png");
            $("[src*=minus]").each(function () {
                var id = $(this).attr('id');
                if (clicked != id) {
                    $(this).trigger('click');
                }
            });
        });
        $("[src*=minus]").live("click", function () {
            $(this).attr("src", "../pics/plus.png");
            $(this).closest("tr").next().remove();
        });
    });
</script>

Code

C#

SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["conString"].ConnectionString);
protected void Page_Load(object sender, EventArgs e)
{
    bind();
}
void bind()
{
    string s = "select TOP 10 * from Customers";
    SqlCommand cmd = new SqlCommand(s, con); ;
    SqlDataAdapter ada = new SqlDataAdapter();
    DataTable dt = new DataTable();
    ada.SelectCommand = cmd;
    ada.Fill(dt);
    GridView1.DataSource = dt;
    GridView1.DataBind();
}
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        GridView gv2 = ((GridView)e.Row.FindControl("GridView2"));
        string id = GridView1.DataKeys[e.Row.RowIndex].Value.ToString();
        SqlCommand cmd1 = new SqlCommand("select Top 10 * from Orders where CustomerID='" + id + "'", con);
        SqlDataAdapter ada1 = new SqlDataAdapter();
        DataTable dt1 = new DataTable();
        ada1.SelectCommand = cmd1;
        ada1.Fill(dt1);
        gv2.DataSource = dt1;
        gv2.DataBind();
    }
}

VB.Net

Private con As SqlConnection = New SqlConnection(ConfigurationManager.ConnectionStrings("conString").ConnectionString)
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    bind()
End Sub
Private Sub bind()
    Dim s As String = "select TOP 10 * from Customers"
    Dim cmd As SqlCommand = New SqlCommand(s, con)
    Dim ada As SqlDataAdapter = New SqlDataAdapter()
    Dim dt As DataTable = New DataTable()
    ada.SelectCommand = cmd
    ada.Fill(dt)
    GridView1.DataSource = dt
    GridView1.DataBind()
End Sub

Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
    If e.Row.RowType = DataControlRowType.DataRow Then
        Dim gv2 As GridView = (CType(e.Row.FindControl("GridView2"), GridView))
        Dim id As String = GridView1.DataKeys(e.Row.RowIndex).Value.ToString()
        Dim cmd1 As SqlCommand = New SqlCommand("select Top 10 * from Orders where CustomerID='" & id & "'", con)
        Dim ada1 As SqlDataAdapter = New SqlDataAdapter()
        Dim dt1 As DataTable = New DataTable()
        ada1.SelectCommand = cmd1
        ada1.Fill(dt1)
        gv2.DataSource = dt1
        gv2.DataBind()
    End If
End Sub

Screenshot