Afficher/masquer la balise div javascript

Question

J'ai une colonne gridview qui reçoit une grande quantité de texte du serveur. Ainsi, au lieu de montrer tout ce texte après le chargement de la grille, je veux l'afficher uniquement si un utilisateur clique sur un lien Développer puis le ferme avec un lien de réduction. Voici ce que j'ai. S'il vous plaît noter que je sais déjà que je peux mettre les deux fonctions javascript en un; Je suis en train de tester en ce moment dans deux fonctions distinctes.

<script type="text/javascript" language="javascript" > 
function hidelink() { 
    var col = $get('col'); 
    var exp = $get('exp'); 
    col.style.display = 'none'; 
    exp.style.display = ''; 

} 
function showlink(){ 
    var col = $get('col'); 
    var exp = $get('exp'); 
    col.style.display = ''; 
    exp.style.display = 'none'; 
} 

<asp:GridView ID="GridView2" Width="400px" runat="server" AutoGenerateColumns="False" 
AllowPaging ="True" 
BackColor="White" BorderColor="#999999" 
BorderStyle="None" BorderWidth="1px" 
CellPadding="3" DataKeyNames="APPID" 
DataSourceID="SqlDataSource3" 
PagerSettings-Mode="NextPreviousFirstLast"    EnableSortingAndPagingCallbacks="True"> 

<PagerSettings Mode="NextPreviousFirstLast" /> 

<RowStyle BackColor="#EEEEEE" ForeColor="Black" /> 
<Columns> 
<asp:BoundField DataField="stuff" HeaderText="Name" ReadOnly="True" 
SortExpression="app" /> 
<asp:BoundField DataField="Description" HeaderText="Short Descr" 
ReadOnly="True" SortExpression="des" /> 
<asp:TemplateField HeaderText="Long Descr" SortExpression="data"> 
<EditItemTemplate> 
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("data") %>'></asp:TextBox> 
</EditItemTemplate> 
<ItemTemplate> 
<div id="col"> 
<asp:LinkButton ID="expand" runat="server" OnClientClick ="hidelink();return false;">Expand</asp:LinkButton> 
    </div> 
    <div id="exp" style="display:none"> 
    <asp:LinkButton ID="collapse" runat="server" OnClientClick ="showlink();return false;">Collapse</asp:LinkButton> 
    </div> 
    <asp:Panel ID="Panel1" runat="server" > 
    <table> 
    <tr> 
     <td>                  <%#Eval("LongDescription")%> 
     </td> 
    </tr> 
    </table> 

Mon problème est que seul le premier enregistrement fait tout ce qu'il faut. (expand/collapse) mais les autres lignes ne se développent et ne cachent pas le lien expand dans la balise div. Il ne trouve que l'ID de la première ligne car lorsque le bouton d'expansion est frappé sur une autre ligne, il change la première ligne pour afficher le lien de réduction. Comment puis-je réparer cela?

Answer 1

Vous devez utiliser des ID uniques pour chaque ligne. Les ID ne peuvent s'appliquer qu'à un élément de la page et votre code applique un ID à toutes les instances de cette grande colonne de la table.

Vous pouvez également utiliser les méthodes DOM pour localiser le bon élément à afficher/masquer. Par exemple:

<div> 
    <a href="#" onclick="showHideDesc(this); return false;">Expand</a> 
    <table style="display: none;"> 
    <tr> 
     <td><%#Eval("LongDescription")%></td> 
    </tr> 
    </table> 
</div> 

Ensuite, pour votre script:

function showHideDesc(link) { 
    var table = link.parentNode.getElementsByTagName("TABLE")[0]; 
    if (table.style.display == "none") { 
     table.style.display = ""; 
     link.innerHTML = "Collapse"; 
    } 
    else { 
     table.style.display = "none"; 
     link.innerHTML = "Expand"; 
    } 
} 

Answer 2

Le problème est que parce que vous avez des éléments répétitifs, les IDs des DIVs sont réutilisés. Ceci est illégal en HTML. La propriété id de chaque élément doit être unique. Une meilleure façon de le gérer est de passer une référence à l'élément courant au gestionnaire et de lui faire dériver l'élément sur lequel il doit opérer en traversant le DOM.

<div> 
    <asp:LinkButton ID="expand" runat="server" OnClientClick ="hidelink(this);return false;">Expand</asp:LinkButton> 
</div> 
<div style="display:none"> 
    <asp:LinkButton ID="collapse" runat="server" OnClientClick ="showlink(this);return false;">Collapse</asp:LinkButton> 
</div> 

Remarque: J'utilise jQuery dans ces fonctions car cela facilite le parcours du DOM. Vous pouvez faire de même avec vos propres fonctions de traversée de DOM et en définissant les propriétés de style si vous le souhaitez.

function hidelink(ctl) { 
    var myDiv = $(ctl).closest('div'); 
    myDiv.hide(); 
    myDiv.next('div').show(); 
} 

function showlink(ctl){ 
    var myDiv = $(ctl).closest('div'); 
    myDiv.hide(); 
    myDiv.prev('div').show(); 
}