title: How do I use JQuery to hide/display divs associated with an adjacent checkbox?
body: <p>I'm just getting started with JQuery and am stumped.  I want a series of input checkboxes, that when checked, display/hide the adjacent textboxes.  I've gotten part of the logic but as you can probably tell, checking any one of the checkboxes, hides/displays ALL of the textboxes.  How can I make each checkbox only affect the contents of the div that is directly below it?  I don't want to write a separate function for each checkbox.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;                                            
  $(document).ready(function() {
  
     $(":checkbox").click(function(){
          if ($(":checkbox").is(":checked")) {
                  $(".optionalinfo").show("fast");}
          else {      
                  $(".optionalinfo").hide("fast");}
          });
  });
  
   &lt;/script&gt;   
  
   &lt;/head&gt;                                                                 
   &lt;body&gt;                                                                  
  
  &lt;input id="chk1" type="checkbox"&gt;Hide/Show text1&lt;/input&gt;
  &lt;div class="optionalinfo"&gt;
  &lt;input id="text1" type="text"&gt;&lt;/input&gt;
  &lt;/div&gt;
  &lt;br&gt;
  
  &lt;input id="chk2" type="checkbox"&gt;Hide/Show text2&lt;/input&gt;                       
  &lt;div class="optionalinfo"&gt;
  &lt;input id="text2" type="text"&gt;&lt;/input&gt;
  &lt;/div&gt;
  &lt;br&gt;
  
  &lt;input id="chk3" type="checkbox"&gt;Hide/Show text3&lt;/input&gt;                       
  &lt;div class="optionalinfo"&gt;
  &lt;input id="text3" type="text"&gt;&lt;/input&gt;
  &lt;/div&gt;
  </code></pre>