title: jQuery - Show and Hid div's with different based on class
body: <p>Hey all,
  I am trying to make a portfolio page for my new website that will display portfolio items in a grid. The functionality of it seems simple but I can't seem to nail down the jQuery. Here is how I need it to work.</p>
  
  <ol>
  <li>By default I want all items to be shown.</li>
  <li>On a specific catagory button click I want it to show the respective divs and hide the rest.</li>
  <li>These divs have overlapping classes(some items fit into more then one category). Those divs should be shown when either of their respective class buttons are clicked.</li>
  </ol>
  
  <p>Here is what I was trying to use to make it work(it seems bulky, but I'm a jQuery noob):</p>
  
  <hr>
  
  <pre><code>        $(document).ready(function(){
          $('#showall').click(function(){ 
              $(".item").show("fast");
          })
  
          $('#webtrigger').click(function(){
               if ($('.web').is(':visible')) {
                   $('.web').show('fast');
                      } else {
                   $('.illustration.print.logo').hide('fast');
               }
           return false;
              })
  
          $('#logotrigger').click(function(){
               if ($(".logo").is(":visible")) {
                   $(".logo").show("fast");
                      } else {
                   $(".illustration.print.web").hide("fast");
               }
           return false;
              })
       });
  </code></pre>
  
  
  
  <pre><code>    &lt;a href="#" id="showall"&gt;show all&lt;/a&gt;&lt;br/&gt;
      &lt;a href="#" id="webtrigger"&gt;web&lt;/a&gt;&lt;br/&gt;
      &lt;a href="#" id="illustrationtrigger"&gt;illustration&lt;/a&gt;&lt;br/&gt;
      &lt;a href="#" id="printtrigger"&gt;print&lt;/a&gt;&lt;br/&gt;
      &lt;a href="#" id="logotrigger"&gt;logo&lt;/a&gt;&lt;br /&gt;
  
      &lt;div id="wrapper"&gt;
          &lt;div class="item web"&gt;web&lt;/div&gt;
          &lt;div class="item illustration"&gt;illustration&lt;/div&gt;
          &lt;div class="item print"&gt;print&lt;/div&gt;
          &lt;div class="item logo"&gt;logo&lt;/div&gt;
          &lt;div class="item web logo"&gt;web logo&lt;/div&gt;
          &lt;div class="item print illustration "&gt;illustration print&lt;/div&gt;
          &lt;div class="item illustration logo"&gt;illustration logo&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p>Any help would be greatly appreciated.
  Thanks!</p>