Shah-Toggle-Table-Row
HTML
<table id="questionGroups" border="1" style="border:1px solid #CCC; width:100%">
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Type</th>
<th>Title</th>
<th>Order</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>aa</td>
<td>bb</td>
<td>cc <a id="toggleQuestionTable" href="#">[Show/Hide Questions]</a>
</td>
<td rowspan="2">order</td>
<td rowspan="2">xx</td>
</tr>
<tr>
<td colspan="4">
<!--EVERYTHING INSIDE THIS I WANT TO HIDE-->
<table>
<tr>
<th>ID</th>
<th>Question</th>
<th>Options</th>
<th>Q No</th>
<th>Options</th>
</tr>
<tr>
<td>xx</td>
<td>xx</td>
<td>xx</td>
<td>xx</td>
<td>xx</td>
</tr>
</table>Add new question</td>
</tr>
<tr>
<td></td>
<td>aa</td>
<td>bb</td>
<td>cc <a id="toggleQuestionTable" href="#">[Show/Hide Questions]</a>
</td>
<td rowspan="2">order</td>
<td rowspan="2">xx</td>
</tr>
<tr>
<td colspan="4">
<table>
<tr>
<th>ID</th>
<th>Question</th>
<th>Options</th>
<th>Q No</th>
<th>Options</th>
</tr>
<tr>
<td>xx</td>
<td>xx</td>
<td>xx</td>
<td>xx</td>
...
JavaScript
$('#questionGroups tr').click(function() {
$(this).parents("tr").next().slideToggle();
toggleTdRowspan(this, 4);
toggleTdRowspan(this, 5);
return false; // prevent default click action from happening!
});
function toggleTdRowspan(currentRow, checkRowspanTd) {
var childTd = $(currentRow).parents("tr").children("td").eq(checkRowspanTd);
var rowspan = $(childTd).attr('rowspan');
if (rowspan == 2) $(childTd).removeAttr('rowspan');
else $(childTd).attr('rowspan', 2);
}