title: How to show/hide an element on checkbox checked/unchecked states using jQuery?
body: <p>I have this code:   </p>
  
  <pre><code>   &lt;fieldset class="question"&gt;
         &lt;label for="coupon_question"&gt;Do you have a coupon?&lt;/label&gt;
         &lt;input class="coupon_question" type="checkbox" name="coupon_question" value="1" /&gt;
         &lt;span class="item-text"&gt;Yes&lt;/span&gt;
     &lt;/fieldset&gt;
  
     &lt;fieldset class="answer"&gt;
         &lt;label for="coupon_field"&gt;Your coupon:&lt;/label&gt;
         &lt;input type="text" name="coupon_field" id="coupon_field"/&gt;
     &lt;/fieldset&gt;
  </code></pre>
  
  <p>And I would like to show/hide the "answer" fieldset (default is hidden) after a click on the checkbox in fieldset "question" How to do that. I wasn't able to do that using the technique for a classic elemetn like:</p>
  
  <pre><code>&lt;script&gt;
      $().ready(function(){
  
          $('.question').live('click',function() {
                   $('.answer').show(300);
              }
              ,
              function(){
                  $('.answer').hide(200);
              }
          );
  
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Could somebody help me how to do that using checkbox? Also if possible to null (uncheck) the checkbox when it's hidden.</p>