Toggle row visibility one at a time
- by kuswantin
I have a couple of tables with similar structures like this:
<table>
<tbody>
<tr>content</tr>
<tr>content</tr>
<tr>content</tr>
<tr>content</tr>
<tr>content</tr>
<tr>content</tr>
<tr>content</tr>
<tr>content</tr> ..etc
--- The fake button is added here
<div class="addrow">Add another</div>
</tbody>
</table>
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.
The action is when I click a dynamic fake button, it will show row no. 2, and clicking again will show another next row.
This is what I have done so far:
$("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('<div class="addrow">Add</div>');
$(".addrow").click(function() {
var hiddenRow = $(this).prev('tr.draggable');
$(this).prev(hiddenRow + 1).show();
//if (hiddenRow + ':last').length) { // <= silly logic
// $(this).hide();
//}
});
The button only works for one row. I must have done something wrong :)
When the final is reached, I also want the button to disappear.
Sorry if this question sound silly.
Any help would be very much appreciated.
Thanks.
