title: Use 'view more' button to enhance information on each table row
body: <p>I have a pretty simple html table, there are lots of information i want to add for each row but i cant display everything when the page is loaded because it is going to make everything very clumsy. So i want to add a view more button in another column for each of the row.</p>
  
  <p>I have already tried writing a JavaScript code but its not working as i want. What i want is:</p>
  
  <ol>
  <li><p>The row should be completely invisible until i click the view more (i tried putting the  tags inside the div but it messed everything up by putting the row outside the table entirely).</p></li>
  <li><p>I want the code to work for all the rows so i don't have to write separate codes for each row.</p></li>
  <li><p>I want the extended information for a row to be invisible whenever i try to view more for another row.</p></li>
  <li><p>If possible, i would like a simple animation for showing the extended animation.</p></li>
  </ol>
  
  <p><strong>Below is my HTML code:</strong></p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;th&gt;Firstname&lt;/th&gt;
          &lt;th&gt;Lastname&lt;/th&gt;
          &lt;th&gt;Action&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;John&lt;/td&gt;
          &lt;td&gt;Doe&lt;/td&gt;
          &lt;td&gt;&lt;a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;" class="btn bN-btn-base bN-btn-small"&gt;View More&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td colspan="3"&gt;
              &lt;div id="example" class="more"&gt;
                  &lt;p&gt;John Doe is a man&lt;/p&gt;
                  &lt;p style="text-align:right;"&gt;&lt;a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;"&gt;Hide this content.&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Jane&lt;/td&gt;
          &lt;td&gt;Doe&lt;/td&gt;
          &lt;td&gt;&lt;a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;" class="btn bN-btn-base bN-btn-small"&gt;View More&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td colspan="3"&gt;
              &lt;div id="example" class="more"&gt;
                  &lt;p&gt;Jane Doe is a woman&lt;/p&gt;
                  &lt;p style="text-align:right;"&gt;&lt;a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;"&gt;Hide this content.&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>Below is my CSS:</strong></p>
  
  <pre><code>&lt;style type="text/css"&gt;
     .more {
        display: none;
     }
     a.showLink, a.hideLink {
        text-decoration: none;
        color: #36f;
        padding-left: 8px;
        background: transparent url(down.gif) no-repeat left; 
     }
     a.hideLink {
        background: transparent url(up.gif) no-repeat left;
     }
     a.showLink:hover, a.hideLink:hover {
        border-bottom: 1px dotted #36f; 
     }
  &lt;/style&gt;
  </code></pre>
  
  <p><strong>Below is my Javascript:</strong></p>
  
  <pre><code>&lt;script language="javascript" type="text/javascript"&gt;
  function showHide(shID) {
     if (document.getElementById(shID)) {
        if (document.getElementById(shID+'-show').style.display != 'none') {
           document.getElementById(shID+'-show').style.display = 'none';
           document.getElementById(shID).style.display = 'block';
        }
        else {
           document.getElementById(shID+'-show').style.display = 'inline';
           document.getElementById(shID).style.display = 'none';
        }
     }
  }
  &lt;/script&gt;
  </code></pre>