Show/Hide div tag javascript

Question

I have a gridview column that's gets a large amount of text from the server. So instead of showing all that text after the grid loads I want to show it only if a user clicks an Expand link then closes it with a collapse link. Here is what I have. Please note that I already know that I can put both javascript functions in one; I'm testing right now in two separate functions.

<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>

My issue is that only the first record does everything it should. (expand/collapse) but the other rows only expand and does not hide the expand link in the div tag. It is only finding the id of the first row because when the expand button is hit on any other row it changes the first row to show the collapse link. How can i fix this?

Answer 1

The problem is that because you have repeating elements, the ids of the DIVs are being reused. This is illegal in HTML. The id property of each element must be unique. A better way to handle it is to pass in a reference to the current element to the handler and have it derive the element that it needs to operate on by traversing the 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>

Note: I'm using jQuery in these functions as it makes it easier to traverse the DOM. You can do the same with your own DOM traversal functions and by setting the style properties if you like.

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();
}

Answer 2

You need to use unique IDs for each row. IDs can only apply to one element in the page, and your code is applying one ID to all the instances of this large column in the table.

Alternatively, you can just use the DOM methods to locate the right element to show/hide. For example:

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

Then for your 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";
    }
}