title: Toggle row visibility one at a time
body: <p>I have a couple of tables with similar structures like this:</p>
  
  <pre><code>&lt;table&gt;
  &lt;tbody&gt;
    &lt;tr&gt;content&lt;/tr&gt;
    &lt;tr&gt;content&lt;/tr&gt;
    &lt;tr&gt;content&lt;/tr&gt;
    &lt;tr&gt;content&lt;/tr&gt;
    &lt;tr&gt;content&lt;/tr&gt;
    &lt;tr&gt;content&lt;/tr&gt;
    &lt;tr&gt;content&lt;/tr&gt;
    &lt;tr&gt;content&lt;/tr&gt; ..etc
      --- The fake button is added here
      &lt;div class="addrow"&gt;Add another&lt;/div&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>UPDATE: All the rows have the same draggable class.</p>
  
  <p>Since this is a long list, I have a need to toggle the rows one at a time. I just need to show the first row, of course, the rest should be toggled.</p>
  
  <p>The action is when I click a dynamic fake button, it will show row no. 2, and clicking again will show another next row.</p>
  
  <p>This is what I have done so far:</p>
  
  <pre><code>$("table#field_fruit_values tr.draggable").not(':first').hide();
  $("table#field_vegetables_values tr.draggable").not(':first').hide();
  
  
  $("body.form table.content-multiple-table tbody").append('&lt;div class="addrow"&gt;Add&lt;/div&gt;');
  
  $(".addrow").click(function() {
    var  hiddenRow = $(this).prev('tr.draggable');
    $(this).prev(hiddenRow + 1).show();
      //if (hiddenRow + ':last').length) { // &lt;= silly logic
       // $(this).hide();
      //}
  });
  </code></pre>
  
  <p>The button only works for one row. I must have done something wrong :)</p>
  
  <p>When the final is reached, I also want the button to disappear. </p>
  
  <p>Sorry if this question sound silly. </p>
  
  <p>Any help would be very much appreciated. </p>
  
  <p>Thanks.</p>