Hi Andy,
I haven't tried it before, but I imagine it has something to do with
the "display" property assigned to the tbody after it is shown. Is the
problem occurring in all browsers?
Have you tried a simple .show() and .hide() in place of
the .slideDown('slow') and .slideUp('slow')? I know that the slideDown
method mangles table layout in FF when applied to a table row because
it applies display:block to the element being slid while FF uses the
standard display:table-row.
If .show() works, you might be able to get away with
using .fadeIn('slow') too.
--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Jan 11, 2008, at 2:53 AM, andy9989 wrote:
Hi everybody,
I am having problems with slideUP - slideDown applied to TBODY tag.
The initial state is hide - all. when I apply slideDown, it slides
down the content of TBODY (correctly) and instantly places it below
the table. Here is a simple code:
$j(document).ready(function(){
$j('tbody.cnt').hide();
$j("#td1").click(function () {
$j("#bd1").slideDown("slow");
});
$j("#td2").click(function () {
$j("#bd1").slideUp("slow");
});
});
The table, which it applies to:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="trigger">
<td colspan="3" id="td1" >Toggle<strong></strong></td>
</tr>
<tbody id="bd1" class="cnt">
<tr>
<td>adfadfasdf</td>
<td>adsfadsf</td>
<td>asdfa</td>
</tr>
<tr>
<td>asdf</td>
<td>asdfadsf</td>
<td>asdfdf</td>
</tr>
<tr>
<td>adsfadsf</td>
<td>adfdf</td>
<td>aadfdf</td>
</tr>
</tbody>
<tr class="trigger">
<td colspan="3" id="td2" >Toggle<strong></strong></td>
</tr>
<tbody id="bd2" class="cnt">
<tr>
<td>adfadfasdf</td>
<td>adsfadsf</td>
<td>asdfa</td>
</tr>
<tr>
<td>asdf</td>
<td>asdfadsf</td>
<td>asdfdf</td>
</tr>
<tr>
<td>adsfadsf</td>
<td>adfdf</td>
<td>aadfdf</td>
</tr>
</tbody>
<tr class="trigger">
<td colspan="3" id="td3" >Toggle<strong></strong></td>
</tr>
<tbody id="bd3" class="cnt">
<tr>
<td>adfadfasdf</td>
<td>adsfadsf</td>
<td>asdfa</td>
</tr>
<tr>
<td>asdf</td>
<td>asdfadsf</td>
<td>asdfdf</td>
</tr>
<tr>
<td>adsfadsf</td>
<td>adfdf</td>
<td>aadfdf</td>
</tr>
</tbody>
<tr class="trigger">
<td colspan="3" id="td4" >Toggle<strong></strong></td>
</tr>
<tbody id="bd4" class="cnt">
<tr>
<td>adfadfasdf</td>
<td>adsfadsf</td>
<td>asdfa</td>
</tr>
<tr>
<td>asdf</td>
<td>asdfadsf</td>
<td>asdfdf</td>
</tr>
<tr>
<td>adsfadsf</td>
<td>adfdf</td>
<td>aadfdf</td>
</tr>
</tbody>
</table>
I cannot figure out what is wrong here.
Please, give me a clue
Thanks
