jQuery slideToggle, slideUp and slideDown - issue in FireFox

JavaScript
1

When i click the link to make the content (TABLE) visible, it jumps open then collapse and then slides down.

Closing the content is not an issue, it slides up normally.

JS1


$(".toggleContent1").hide();
$(".toggleTrigger").toggle(function(){
     $(this).html("hide...");
     $("."+$(this).attr("rel")).slideDown(1000);
     //alert(1);
    }, function () {
     $(this).html("more...");
     $("."+$(this).attr("rel")).slideUp(1000);
     //alert(2);
   });

JS2


$(".toggleContent1").hide();
//Switch the "Open" and "Close" state per click
   $(".toggleTrigger").toggle(function(){
     $(this).html("hide...");
    }, function () {
     $(this).html("more...");
   });
   //Slide up and down on click
   $(".toggleTrigger").click(function(){
    $("."+$(this).attr("rel")).slideToggle("slow");
    return false;
   });

HTML


<table class="toggleContent1">
 <tr><td>Row 1</td></tr>
 <tr><td>Row 2</td></tr>
 <tr><td>Row 3</td></tr>
 <tr><td>Row 4</td></tr>
 <tr><td>Row 5</td></tr>
 <tr><td>Row 6</td></tr>
 <tr><td>Row 7</td></tr>
 <tr><td>Row 8</td></tr>
 <tr><td>Row 9</td></tr>
 <tr><td>Row 10</td></tr>
 <tr><td>Row 11</td></tr>
</table>
<a href="#" rel="toggleContent1" class="toggleTrigger">more...</a>

Thanks

2

The reason the sliding doesn’t work is because the CSS “display” value for a table is “table” and for the slideToggle function to work, it needs to be used on “block” elements.

There are a few possible solutions here:

Option 1, wrap the table in a div (probably the easiest solution with the least potential for creating problems)

Option 2, add the following CSS to your stylesheet:

table.toggleContent1 {
  display:block;
}

This of course could cause some minor display issues in other browsers, depending on what other styles you have on tables and the surrounding content.

Option 3, wrap the table in a div using JS that div you can then target as the one to slideToggle, if you have a lot of tables you might want to consider Option 1 instead.

3

thanks, gone with option 1 and it looks good.