title: jQuery hide / show content based on common parent
body: <p>I've this repeated HTML code.  </p>
  
  <pre><code>&lt;div id="id1" class="questio"&gt;   
    &lt;input type="checkbox" class="c1"&gt;
    &lt;div class="c2"&gt;Content&lt;/div&gt;   
  &lt;/div&gt;
  
  &lt;div id="id2" class="questio"&gt;    
    &lt;input type="checkbox" class="c1"&gt;
    &lt;div class="c2"&gt;Another Content&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="id3" class="questio"&gt;   
    &lt;input type="checkbox" class="c1"&gt;
    &lt;div class="c2"&gt;Another Content&lt;/div&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p>The wanted behaviour is to hide / show div c2 Content for each section <strong>independently</strong> based on input.c1 checked or not:</p>
  
  <pre><code>if ($(".c1").is(":checked")) {     
    $('.c2').show(); 
  }
  </code></pre>
  
  <p>I tried somethig like this but I can't go on :</p>
  
  <pre><code>$("input.c1").each(function() {
    var parent1 = $(this).closest('questio');     
    if ($(this).is(":checked")) {
          /// ??
    }
  });
  </code></pre>