title: Show/hide tables with jQuery
body: <p>I have a series of tables similar to the following html code:</p>
  
  <pre><code>&lt;table id="film"&gt;&lt;tr&gt;
         &lt;th class="1"&gt;//HEAD CONTENT 1//&lt;/th&gt;
         &lt;/tr&gt;
         &lt;tr&gt;
         &lt;td class="1"&gt;//BODY CONTENT 1//&lt;/td&gt;
         &lt;/tr&gt;&lt;/table&gt;
  &lt;table id="film"&gt;&lt;tr&gt;
         &lt;th class="2"&gt;//HEAD CONTENT 2//&lt;/th&gt;
         &lt;/tr&gt;
         &lt;tr&gt;
         &lt;td class="2"&gt;//BODY CONTENT 2//&lt;/td&gt;
         &lt;/tr&gt;&lt;/table&gt;
  </code></pre>
  
  <p>I want the tables to expand individually when the respective head (<code>&lt;th&gt;</code>) is clicked. Moreover the tables should start unexpanded. I use the following jQuery script:</p>
  
  <pre><code>$(document).ready(function(){
      $('#film td').hide();
  });
  
  $(document).ready(function(){
  var n1 = 0;
        $('#film th.1').click(function(){
           if(n1 == 0){
           $('#film td.1').show();
           n1 = 1;
           }else{
          $('#film td.1').hide();
           n1 = 0;}
         });
  var n2 = 0;
        $('#film th.2').click(function(){
           if(n2 == 0){
           $('#film td.2').show();
           n2 = 1;
           }else{
          $('#film td.2').hide();
           n2 = 0;}
         });
  });
  </code></pre>
  
  <p>However when I execute only the top table is able to show/hide not the second one.
  Can anyone see where I'm going wrong?</p>