title: Jquery- checkbox to open div but close it with a click handler and uncheck the checkbox
body: <p>I have several checkboxes that when checked open up corresponding divs of content.  On those content divs I have an "X" that the user can click on to close the div.  The issue is that the checkbox stays checked when the user uses the "X" to close the div.  I am not sure how to get the box to uncheck if the user decides to close the div using the x instead of going back and using the checkbox. </p>
  
  <p>JSFiddle:</p> 
  
  <p><a href="http://jsfiddle.net/wJYjT/7/" rel="nofollow">http://jsfiddle.net/wJYjT/7/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;input name="checkbox_name" id="card1" type="checkbox"&gt;&lt;span&gt;Card 1&lt;/span&gt;
  
  &lt;input name="checkbox_name" id="card2" type="checkbox"&gt;&lt;span&gt;Card 2&lt;/span&gt;
  
  &lt;div class=" summaryCard content_hidden content_option_card1 card1"&gt;
  
      &lt;h3&gt;Card 1&lt;/h3&gt;
  
      &lt;div class="closeCard"&gt;
          &lt;button&gt;Close X&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=" summaryCard content_hidden content_option_card2 card2"&gt;
      &lt;h3&gt;Card 2&lt;/h3&gt;
  
      &lt;div class="closeCard"&gt;
          &lt;button&gt;Close X&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><P>CSS:</p></p>
  
  <pre><code>.content_hidden {
  display:none;
  }
  .summaryCard {
  width:60px;
  height:60px;
  border:2px solid #000000;
  }
  </code></pre>
  
  <p>JQuery:</p>
  
  <pre><code>$(':checkbox').change(function () {
      var option = 'content_option_' + $(this).attr('id');
      if ($('.' + option).css('display') == 'none') {
          $('.' + option).show();
      } else {
          $('.' + option).hide();
      }
  });
  
  
  $(".closeCard").click(function () {
      $(this).parent().hide();
  });
  </code></pre>