Question

I am a learner in Jquery coding, My task is to show/hide TABLE elements on clicking SPAN element. I tried with below mentioned Jquery code which is not working..

HTML code is:

foreach($array as $key => $arrValue) {
  <span id="link<?=$count?>">$key</span>
    <table id="tbl<?=$count?>">

      foreach($arrValueas $key => $value) {
           <tr><td>$value</td></tr>
      }
   </table>
}

My Jquery code is:

$(function(){
   // To open/close field's group div
   $("span").each(function (i){
      i++;
      $('#link' + i).click(function (i) {
          $('#tbl' + i).toggle(800);
      });
   });
});

Pls avoid PHP open close tags issues in HTML code..

Answer 1

try this

$(function(){
   $("span").each(function (i){

      (function(i) {

          $('#link' + i).click(function() {
              $('#tbl' + i).toggle(800);
          });

      }(i));

   });
});

you don’t need to increment the variable with i++ oyherwise you won’t set the handler on the expected link element. Each() is already incrementing the variable i