title: Hide or show LI based on the category that is selected (filter)
body: <p>I have a list of li items whose categories have been added to the class. 1 means it is associated with that category, 0 means it is not. When first visiting the page, they will all appear "View All". Clicking "Fruits" will show all items that have "fruits-1" in them. Clicking "View All" will show ALL items.</p>
  
  <p>Filter by:</p>
  
  <pre><code>&lt;ul class="categories"&gt;
  &lt;li&gt;&lt;a href=""&gt;View All&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;Fruits&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;Vegetables&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;Super Smoothies&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;Coffee and Tee&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;Nuts&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;Desserts &amp; Cakes&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul class="items"&gt;
  &lt;li class="fruits-0 vegetables-1 super-1 coffee-0 nuts-1 desserts-1"&gt;Product 1&lt;/li&gt;
  &lt;li class="fruits-1 vegetables-0 super-0 coffee-0 nuts-0 desserts-0"&gt;Product 2&lt;/li&gt;
  &lt;li class="fruits-0 vegetables-1 super-1 coffee-0 nuts-0 desserts-1"&gt;Product 3&lt;/li&gt;
  &lt;li class="fruits-1 vegetables-0 super-0 coffee-0 nuts-0 desserts-0"&gt;Product 4&lt;/li&gt;
  &lt;li class="fruits-1 vegetables-0 super-0 coffee-0 nuts-1 desserts-0"&gt;Product 5&lt;/li&gt;
  &lt;li class="fruits-1 vegetables-0 super-0 coffee-1 nuts-1 desserts-0"&gt;Product 6&lt;/li&gt;
  &lt;li class="fruits-0 vegetables-1 super-0 coffee-1 nuts-1 desserts-0"&gt;Product 7&lt;/li&gt;
  &lt;li class="fruits-1 vegetables-0 super-0 coffee-0 nuts-1 desserts-0"&gt;Product 8&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I currently have this. However, it is not working on Categories that have a space in them, but the &amp; is working. How can I get it to work for categories with a space in them as well e.g. Super Smoothies?</p>
  
  <pre><code>$(function () {
      $('ul.categories li a').click(function (e) {
          e.preventDefault();
          var category = $(this).text().toLowerCase().split("&amp;");
  
          if (category[0] == "view all") {
              $('ul.items li').show();
          } else {
              //hide all categories
              $('ul.items li').hide();
              $.each(category, function (i, v) {
                  $('ul.items li.' + v.trim() + "-1").show();
              });
          }
      });
  });
  </code></pre>