title: adding removing classes in JQuery
body: <p>I have a form which if a checkbox is selected extra fields appear and when not selected they disappear, the code I used to do this is:</p>
  
  <pre><code>$(function () {
      $('#cmntCheck').change(function () {
          if ($('#cmntCheck').is(':checked')) {
              $("#orderOptPanel").addClass('hidden');
              $("#stAddressRow").addClass('hidden');
              $("#cityRow").addClass('hidden');
              $("#stateRow").addClass('hidden');
          } else {
              $("#orderOptPanel").removeClass('hidden');
              $("#stAddressRow").removeClass('hidden');
              $("#cityRow").removeClass('hidden');
              $("#stateRow").removeClass('hidden');
          }
      }).change();
  }); 
  </code></pre>
  
  <p>but it does not work, what I found works is .toggleClass() but that is not what I am looking for, I Tried .show() and .hide() but it did not work that is why I did it the way I did above. what I want to do is when the check box is selected show the extra fields and when it is not selected not show them. How do I do this?</p>
  
  <p><strong><em><a href="https://jsfiddle.net/68qrf13x/" rel="nofollow">JSFiddle</a></em></strong></p>