title: Conditional jQuery Toggle Function
body: <p>I want to hide and show list items based on their attributed class.</p>
  
  <p>The problem is that certain list items have multiple classes. So if I toggle one class then toggle another, any items with both selected classes will be removed.</p>
  
  <p>I created a demo of my problem: <a href="http://jsfiddle.net/a4NkN/2/" rel="nofollow">http://jsfiddle.net/a4NkN/2/</a></p>
  
  <p>Here's the JS CODE:</p>
  
  <pre><code>$('#easy').click(function(){
      $(this).toggleClass( "checked" );
      $('.easy').toggle();
  });
  
  $('#fun').click(function(){
      $(this).toggleClass( "checked" );
      $('.fun').toggle();
  });
  
  
  $('#silly').click(function(){
      $(this).toggleClass( "checked" );
      $('.silly').toggle();
  });
  </code></pre>
  
  <p>If you select the "Easy" and "Fun" buttons, Boating will disappear. </p>
  
  <p>How can I get Boating to stay?</p>