jQuery slideDown + CSS Floats
- by danilo
I'm using a HTML Table with several rows. Every second row - containing details about the preceding row - is hidden using CSS.
When clicking the first row, the second row gets showed using jQuery show(). This is quite nice, but I would prefer the slideDown-Effect.
The problem is, inside the details row, there are two floating DIVs, one floating on the left, and one on the right. Now if i slideDown the previously hidden row, the contained DIVs behave strange and "jump around". See this animated gif to understand what I mean: http://ich-wars-nicht.ch/tmp/lunapic_127365879362365_.gif
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>
The CSS:
.table-vmlist tr.row-details { display: none; }
div.vmdetail-left { float: left; width: 50%; }
div.vmdetail-right { float: right; width: 50%; }
And the jQuery code:
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 way to fix this behavior, and to implement a nice slideDown-effect?
