[Edited at
the resquest of admins]
The best way I can explain my problem is showning an example. I have
the table that you can see on
the link below (since I can't post images...), that ha a table head (blue) and four rows, whose cells are
green and white in color. I just want
the white cells to hide/show alternately by clicking on
green cells, which would remain always visible as parent cells. After hiding white cells,
the green ones should be aligned into
the same row, as they would fit like tetris bricks. That's all, I think more clear is impossible.
http://i.stack.imgur.com/3n3In.jpg (follow
the link to see
the image explanation)
The table code:
<table class="columns" cellspacing="0" border="0">
<tr>
<td class="left" rowspan="2">
<div style="text-align:center;"></div> </td>
</tr><tr><td class="middle">
<div id="detail_table_source" style="display:none"></div>
<br>
<table id="detail_table" class="detail">
<colgroup>
<col style="width:20px;">
<col style="width:40px;">
<col style="width:70px;">
<col style="width:20px;">
</colgroup>
<thead>
<tr>
<th width="88">Blahhh</th>
<th width="211">BLAHH</th>
<th width="229">BLAHH</th>
</tr>
</thead>
<tbody>
<tr class="parent" id="row123" style="cursor: pointer; " title="Click to expand/collapse">
<td bgcolor="#A6A4CC">Blahhh</td>
<td bgcolor="#A6A4CC">blah blah </td>
<td bgcolor="#A6A4CC">Blahh</td>
</tr>
<tr class="child-row123" style="display: none; ">
<td rowspan="3" bgcolor="#5B5B5B"> </td>
<td>blah blah </td>
<td>blah blah</td>
</tr>
<tr class="child-row123" style="display: none; ">
<td>blah blah</td>
<td>blah blah</td>
</tr>
<tr class="child-row123" style="display: none; ">
<td>blah blah</td>
<td>blah blah</td>
</tr>
<tr>
<td bgcolor="#6B7A94" class="parent" id="row456" style="cursor: pointer; " title="Click to expand/collapse"><strong>Blahh</strong></td>
<td bgcolor="#FFFFFF" class="child-cell456" style="display: none; ">blah blah</td>
<td bgcolor="#FFFFFF" class="child-cell456" style="display: none; ">blah blah</td>
</tr>
<tr>
<td rowspan="4" valign="top" bgcolor="#5B5B5B" class="child-row456" style="display: none; "> </td>
<td bgcolor="#6B7A94" class="parent" id="cell456" style="cursor: pointer; " title="Click to expand/collapse">blah blah</td>
<td bgcolor="#6B7A94" class="parent" id="cell456" style="cursor: pointer; " title="Click to expand/collapse">blah blah</td>
</tr>
<tr>
<td class="child-cell456" style="display: none; ">blah blah</td>
<td class="child-cell456" style="display: none; ">blah blah</td>
</tr>
<tr>
<td class="child-cell456" style="display: none; ">blah blah</td>
<td class="child-cell456" style="display: none; ">blah blah</td>
</tr>
</tbody>
</table>
The script to hide/show whole rows (this works because it is copied from another example):
<script language="javascript">
$(function() {
$('tr.parent')
.css("cursor","pointer")
.attr("title","Click to expand/collapse")
.click(function(){
$(this).siblings('.child-'+this.id).toggle();
});
$('tr[@class^=child-]').hide().children('td');
});
</script>
And
the failed attempt at expanding/hiding individual cells:
<script language="javascript">
$(function() {
$('td.parent')
.css("cursor","pointer")
.attr("title","Click to expand/collapse")
.click(function(){
$(this).siblings('.child-'+this.id).toggle();
});
$('td[@class^=child-]').hide().children('td');
});
</script>
