Question

I am trying to create a dynamic accordion. My problem is that I can not seem to get a reference to the i variable inside the for loop. I know it is a scope problem but I thought this closure would do the trick…. Please someone help me out as this is driving me completely insane.

jQuery(function(){

  var tables = jQuery('table');
  var tableHeadings = jQuery('h3');

  for(i =0 , ii = tableHeadings.length; i < ii; i++){
     (function(){ 

        var index = i;
        tables.eq(index).addClass('table-' + index);

        tableHeadings.eq(index).click(function(){   
            tables.eq(index).slideToggle(); 
        });

      })();
    }  
});

Answer 1

Better yet:

tableHeadings.each(function(index, element) {
  tables.eq(index).addClass('table-' + index);

  tableHeadings.eq(index).click(function() {   
    tables.eq(index).slideToggle(); 
  });
});