title: Show/Hide div tag javascript
body: <p>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. <em>Please note that I already know that I can put both javascript functions in one; I'm testing right now in two separate functions.</em></p>
  
  <pre><code>&lt;script type="text/javascript" language="javascript" &gt;
  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';
  }
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;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"&gt;
  
  &lt;PagerSettings Mode="NextPreviousFirstLast" /&gt;
  
   &lt;RowStyle BackColor="#EEEEEE" ForeColor="Black" /&gt;
   &lt;Columns&gt;
   &lt;asp:BoundField DataField="stuff" HeaderText="Name" ReadOnly="True" 
   SortExpression="app" /&gt;
   &lt;asp:BoundField DataField="Description" HeaderText="Short Descr" 
   ReadOnly="True" SortExpression="des" /&gt;
   &lt;asp:TemplateField HeaderText="Long Descr" SortExpression="data"&gt;
   &lt;EditItemTemplate&gt;
   &lt;asp:TextBox ID="TextBox1" runat="server" Text='&lt;%# Bind("data") %&gt;'&gt;&lt;/asp:TextBox&gt;
   &lt;/EditItemTemplate&gt;
   &lt;ItemTemplate&gt;
   &lt;div id="col"&gt;
   &lt;asp:LinkButton ID="expand" runat="server" OnClientClick ="hidelink();return false;"&gt;Expand&lt;/asp:LinkButton&gt;  
    &lt;/div&gt;
    &lt;div id="exp" style="display:none"&gt;
    &lt;asp:LinkButton ID="collapse" runat="server" OnClientClick ="showlink();return false;"&gt;Collapse&lt;/asp:LinkButton&gt;  
     &lt;/div&gt;
    &lt;asp:Panel ID="Panel1" runat="server" &gt;
    &lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;                                                                     &lt;%#Eval("LongDescription")%&gt;
          &lt;/td&gt;
       &lt;/tr&gt;
    &lt;/table&gt;
  </code></pre>
  
  <p>
                                                                  
   
   
   </p>
  
  <p></p>
  
  <p><strong>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?</strong></p>