Wie automatisch div-Tag zu schließen, wenn ich neue Div-Tag öffnen

Question

Ich habe ein GridView Control, die mehrere a link und div tags in Gridview-Steuerelement dynamisch generieren.
Meine Forderung ist:
wenn Gridview-Anzeige mehr als 50 seiner 50 a link und div Tags aufzeichnet erzeugen, wenn ich zum ersten Reihe zeigen Anker klicken Sie auf den Link Anzeigen wieder erste Reihe div-Tags FirstName and LastName Aufzeichnungen Details, wenn ich a anchor auf eine Zeile klicken Link zuerst geöffnet div tags schließen automatisch und öffnete neue div Tags, welche Zeile ich geklickt habe.

<asp:GridView ID="GridParent" runat="server"> 
    <Columns> 
     <asp:TemplateField> 
     <ItemTemplate> 
      <table> 
      <tr> 
      <td> 
       Username : <%# Eval("Username") %> 
       <a href="#" onclick="ShowDiv(this);">Show</a> 
       <div id="div1" style='display:none;'> 
       First Name: <%# Eval("FirstName") %> 
       Last Name: <%# Eval("LastName") %> 
       </div> 
      </td> 
      </tr> 
      </table> 
     </ItemTemplate> 
     </asp:TemplateField> 
    </Columns> 
    </asp:GridView> 

Answer 1

Try this ...

$('a').click(function() { 
 
    $('.more-info').css('display', 'none'); 
 
    $(this).next().css('display', 'block'); 
 
});

.more-info { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     Username : "Username" 
 
     <a href="javascript:void(0)">Show</a> 
 
     <div id="div1" class="more-info"> 
 
     First Name: "FirstName" Last Name: "LastName" 
 
     </div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     Username : "Username" 
 
     <a href="javascript:void(0)">Show</a> 
 
     <div id="div2" class="more-info"> 
 
     First Name: "FirstName" Last Name: "LastName" 
 
     </div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     Username : "Username" 
 
     <a href="javascript:void(0)">Show</a> 
 
     <div id="div3" class="more-info"> 
 
     First Name: "FirstName" Last Name: "LastName" 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>