My current project involves using an HTML table with multiple rows. I have hidden every second row, which contains details about the preceding row, using CSS.
Upon clicking the first row, I am utilizing jQuery's show() function to display the second row. While this works well, I would prefer to achieve a slideDown effect instead.
The issue arises when there are two floating DIVs within the details row - one positioned on the left and the other on the right. When I attempt to slide down the previously hidden row, the behavior of these DIVs becomes erratic, causing them to "jump around." You can see what I mean by referring to this animated gif: http://example.com/animatedgif
Here is a snippet of the markup:
<tr class="row-vm">
<td>...</td>
...
</tr>
<tr class="row-details">
<td colspan="8">
<div class="vmdetail-left">
...
</div>
<div class="vmdetail-right">
...
</div>
</td>
</tr>
Below is the CSS styling:
.table-vmlist tr.row-details { display: none; }
div.vmdetail-left { float: left; width: 50%; }
div.vmdetail-right { float: right; width: 50%; }
Finally, here is the jQuery code being used:
if ($(this).next().css('display') == 'none')
{
// Show details
//$(this).next().show();
$(this).next().slideDown();
}
else
{
// Hide details
//$(this).next().hide();
$(this).next().slideUp();
}
Is there a solution to this problem that will allow me to maintain a smooth slideDown effect while preventing the jumping behavior of the floated DIVs?