C# 打开其中一个gridview面板时关闭其他gridview面板

我在gridview中有gridview。当前，当我单击一个面板时，它会打开另一个面板，当我单击另一个面板时，它会打开另一个面板，但不会关闭先前打开的面板。我希望一次只打开一个面板

 <%--INSTITUTION PANEL START--%>
 <div class="panel panel-danger">
                    <div class="panel-heading">
                        <h4>
                            <i class="fa fa-plus-circle" aria-hidden="true"></i>&nbsp;<asp:LinkButton ID="lnkCreateInstitution" runat="server" OnClick="lnkCreateInstitution_Click">Create New Institution</asp:LinkButton>
                        </h4>
                    </div>
                    <div class="panel-body">
                        <asp:GridView ID="dgInstitute" runat="server" AutoGenerateColumns="False" CellPadding="0"
                            CellSpacing="0" ShowHeaderWhenEmpty="True" PageSize="100" Width="100%" CssClass="table table-responsive table-bordered"
                            Visible="true" UseAccessibleHeader="true" OnRowCreated="dgInstitute_RowCreated"
                            OnDataBound="dgInstitute_DataBound" OnRowDataBound="dgInstitute_RowDataBound">
                            <Columns>
                                <asp:BoundField HeaderText="Id" DataField="refGroupId" HeaderStyle-HorizontalAlign="Left" HeaderStyle-CssClass="gridHeader panel-default"></asp:BoundField>
                                <asp:TemplateField HeaderStyle-CssClass="gridHeader panel-default">
                                    <ItemTemplate>
                                        <div class="panel panel-primary">
                                            <div class="panel-heading">
                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <asp:Button ID="btnInstituteName" Text='<%#Eval("refValues") %>' CssClass="btn btn-Institute"
                                                            runat="server" OnClick="btnInstituteName_Click" CommandArgument='<%#Eval("refGroupId") %>' />
                                                    </div>
                                                </div>

                                            </div>
                                            <%--PROGRAM PANEL START--%>
                                              <asp:Panel ID="programPanel" runat="server" class="hidden">
                                                <div id="pnlProgramBody" runat="server" class="panel-body">
                                                    <h5>
                                                        <i class="fa fa-plus-circle" aria-hidden="true"></i>&nbsp;<asp:LinkButton ID="lnkCreateProgram" runat="server" OnClick="lnkCreateProgram_Click">Create New Program</asp:LinkButton></h5>
                                                    <asp:GridView ID="dgProgram" runat="server" AutoGenerateColumns="False" CellPadding="0"
                                                        CellSpacing="0" ShowHeaderWhenEmpty="True" PageSize="100" Width="100%"
                                                        OnRowDataBound="dgProgram_RowDataBound" OnRowCreated="dgProgram_RowCreated" CssClass="table table-responsive table-bordered zero-margin-table"
                                                        Visible="true" UseAccessibleHeader="true">
                                                        <Columns>
                                                            <asp:BoundField HeaderText="Id" DataField="refGroupId" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="80%" HeaderStyle-CssClass="gridHeader panel-default"></asp:BoundField>
                                                            <asp:TemplateField HeaderStyle-CssClass="gridHeader panel-default" ShowHeader="false" HeaderStyle-Width='20%'>
                                                                <ItemTemplate>

                                                                    <asp:Button ID="btnProgram" AutoPostBack="true" Width="100%" CssClass="btn btn-primary btn-embossed" runat="server"
                                                                        Text='<%#Eval("refValues") %>'
                                                                        OnClick="btnProgram_Click" CommandArgument='<%#Eval("refGroupId") %>' />
                                                             </ItemTemplate>
                                                            </asp:TemplateField>

                                                        </Columns>
                                                        <HeaderStyle CssClass="panel-default"></HeaderStyle>
                                                        <RowStyle CssClass=""></RowStyle>
                                                    </asp:GridView>
                                                </div>
                                            </asp:Panel>
                                            <%--PROGRAM PANEL END--%>
                                        </div>
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                            <HeaderStyle CssClass="panel-default"></HeaderStyle>
                            <RowStyle CssClass=""></RowStyle>
                        </asp:GridView>
                        <%--INSTITUTION PANEL END--%>

现在，当我点击一个机构时，它会打开面板，显示包含程序列表的网格的程序面板，当我再次点击同一个面板时，它会关闭它。因此，这是完美的工作。但是当一个程序面板为一个特定的研究所打开时，我点击另一个研究所按钮，它就会关闭其他打开的程序面板

任何建议。我使用asp.net面板和gridview组合，因为我必须执行许多任务

---

客户端使用jQuery和JavaScript扩展折叠功能

对于子GridView的展开和折叠，我使用了jQuery

<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" CssClass="Grid"
    DataKeyNames="CustomerID" OnRowDataBound="OnRowDataBound">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <img alt = "" style="cursor: pointer" src="images/plus.png" />
                <asp:Panel ID="pnlOrders" runat="server" Style="display: none">
                    <asp:GridView ID="gvOrders" runat="server" AutoGenerateColumns="false" 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>
                </asp:Panel>
            </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="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 colspan = '999'>" + $(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>

$（“[src*=plus]”。实时（“单击”，函数（）{
（“+$（this）.next（）.html（）+”）之后
$（this.attr（“src”，“images/minus.png”）；
});
$（“[src*=减号]”）.live（“单击”，函数（）{
$（this.attr（“src”、“images/plus.png”）；
$（this）.closest（“tr”）.next（）.remove（）；
});

<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" CssClass="Grid"
    DataKeyNames="CustomerID" OnRowDataBound="OnRowDataBound">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <img alt = "" style="cursor: pointer" src="images/plus.png" />
                <asp:Panel ID="pnlOrders" runat="server" Style="display: none">
                    <asp:GridView ID="gvOrders" runat="server" AutoGenerateColumns="false" 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>
                </asp:Panel>
            </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="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 colspan = '999'>" + $(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>