Click event firing but .fadeIn not working
<p>I can't see why the last click event isn't working. It should .fadeIn all list items and then .hide any list items that aren't matched. The .fadeIn doesn't seem to fire.</p>

<p><strong>Expected Behaviour</strong></p>

<ul>
<li><p>Filter by 'All, Rum &amp; Cola'</p></li>
<li><p>Secondary Filter by 'Blonde, Brunette'</p></li>
</ul>

<p><a href="http://jsfiddle.net/establish/V8c8C/" rel="nofollow">http://jsfiddle.net/establish/V8c8C/</a></p>

<p>Any comments or improvements appreciated.</p>

<p><strong>HTML</strong></p>

<pre><code>&lt;ul id="drinks"&gt;
  &lt;li data-drink="all"&gt;&lt;a data-drink="all" href="#"&gt;All&lt;/a&gt;&lt;/li&gt;
  &lt;li data-drink="rum"&gt;&lt;a data-drink="rum" href="#"&gt;Rum&lt;/a&gt;&lt;/li&gt;
  &lt;li data-drink="cola"&gt;&lt;a data-drink="cola" href="#"&gt;Cola&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;ul id="drink-orders"&gt;
   &lt;li class="blonde"&gt;&lt;a class="blonde" data-drink="rum" href="#"&gt;Blonde&lt;/a&gt;&lt;/li&gt;
   &lt;li class="brunette"&gt;&lt;a class="brunette" data-drink="cola" href="#"&gt;Brunette&lt;/a&gt;&lt;/li&gt;
   &lt;li class="blonde"&gt;&lt;a class="blonde" data-drink="rum" href="#"&gt;Blonde&lt;/a&gt;&lt;/li&gt;
   &lt;li class="brunette"&gt;&lt;a class="brunette" data-drink="cola" href="#"&gt;Brunette&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p><strong>JQuery</strong></p>

<pre><code>$('#drinks a').click(function(e) {

e.preventDefault();

var alcohol = $(this).attr("data-drink");

if ($(this).attr("data-drink") === "all") {
    $("#drink-orders li").fadeIn();
}

else {
    $("#drink-orders li").fadeIn();
    $("#drink-orders li:not([data-drink="+alcohol+"])").hide();  
}
});

$('#girls a').click(function(e) {

e.preventDefault();

var hair = $(this).attr("class");

$("#drink-orders li").fadeIn();
$("#drink-orders li:not(class="+hair+")").hide();

});
</code></pre>
