title: Javascript table row display/hide
body: <p>I have created a table using Javascript/Backbone. While using a template to display the rows I have one visible row and one hidden from the start. When I click on a specific table I want it to 'expand' by showing the hidden row placed under the visible one. I'm also using a loop to create the table so all the rows have the same class and id. So far I used this to expand and collapse the rows:</p>
  
  <pre><code>expandRow: function() {
      if (document.getElementById('hiddenText').style.display == 'none' ) {
          document.getElementById('hiddenText').style.display = '';
      }
      else if (document.getElementById('hiddenText').style.display == '') {
          document.getElementById('hiddenText').style.display = 'none';
      }
  </code></pre>
  
  <p>However this solution only opens and closes the same table row (the top one) no matter which row I click on. I need help to find a solution to only expand/collapse the specific row I click on.</p>