CODEWITHSUNDEEP
jquery
LefterisL
LefterisL

Reputation: 1143

Display series of tables one by one JS

I want to display a series of tables that are generated by AJAX.

Below is my JS code.

$(function() {
    $(".buttonTEST").on("click",function(e) {
        $(".18").toggle( "slow", function showNext() {  
            $(this).toggle("slow");
            $(this).next("table").toggle( "slow", showNext);    
        });
    });
});

18 is the class of the first table. The code works fine but displays the table and closes them WAT too fast. What i want is some pause between the open-close and the next open-close. I tried playing around with setTimeout but kept ending up with never ending loops and errors.

How can i do this?

Upvotes: 0

Views: 40

Answers (1)

Eternal1
Eternal1

Reputation: 5625

$.fn.slowToggle = function() {
    item = $(this);        
    item.toggle("slow", function() {                        
        setTimeout(function(){
           var next = item.next("table");
           if(next.length) {
               next.slowToggle();
           } else {
              return null;
           }
        }, 2000);
    });
}

$(".buttonTEST").on("click",function(e) {
    $(".18").slowToggle();            
});

Here's fiddle

Upvotes: 1

Related Questions