title: Toggle CSS class with jQuery
body: <p>I can't seem to get this to work. What I want to do is have jQuery add / remove (or toggle) a class which has <code>display:none</code> on it</p>
  
  <p>jQuery</p>
  
  <pre><code>  &lt;script type ="text/javascript"&gt;
  
      //Event Triggers
      $("#cbVitamins").click(function(evt){
        $("#products h2.product-type[data-type=vitamin]").parent().addClass("hideItem");
      });
    &lt;/script&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>  &lt;style&gt;
      .hideItem {
        display:none;
      }
    &lt;/style&gt;
  </code></pre>
  
  <p>HTML Button to hook event onto</p>
  
  <pre><code>      &lt;div&gt;
          &lt;span&gt;Show: &lt;/span&gt;
          &lt;input id="cbVitamins" type="checkbox" checked="checked"/&gt;
          &lt;label for="cbVitamins"&gt;Vitamins&lt;/label&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>HTML → add <code>.hideItem</code> class to the <code>li</code> element</p>
  
  <pre><code>&lt;li class="product-item" data-prod_id="V-C6614"&gt;
      &lt;img class="product-image" src="images/products/vitamin-c.jpg" alt="Vitamin C - Product Photo"&gt;
      &lt;h2 class="product-name" data-type="vitamin"&gt;Vitamin C&lt;/h2&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>what its supposed to do:</p>
  
  <p><a href="https://i.stack.imgur.com/5Gl8b.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5Gl8b.gif" alt="enter image description here"></a></p>