SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Learning... tahirjadoon's Avatar
    Join Date
    Jan 2003
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery slideToggle, slideUp and slideDown - issue in FireFox

    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
    Code:
    $(".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
    Code:
    $(".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
    Code:
    <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
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code CSS:
    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.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    Learning... tahirjadoon's Avatar
    Join Date
    Jan 2003
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks, gone with option 1 and it looks good.
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •