title: 'ul >li' like dropdown + filtering by class
body: <p>I wrote small function ( actually 2).
  First, ul > li list like a custom dropdown + filter at the same time.</p>
  
  <p>What it does:</p>
  
  <pre><code>- when selected an 'li'
  - copy span from inside of it to - &gt; 'a href' (top of the dropdown)
  - get class of the span inside 'a href' - which we just copied
  - hide all div's which does not have selected class (div's and span's have same classes)
  </code></pre>
  
  <p>And all worked fine till I have added 'all' option with if else conditions.</p>
  
  <p>Chrome js console is saying that selected classes in undefined when is last step</p>
  
  <pre><code>$('.content div').not('.' + CheckWhichClassSelected).hide();
  </code></pre>
  
  <p><strong>What I'm doing wrong?</strong></p>
  
  <p>jsfiddle: <a href="http://jsfiddle.net/MrTest/hLcML/" rel="nofollow">http://jsfiddle.net/MrTest/hLcML/</a> </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="filter"&gt;
      &lt;a class="dropDownSelect" href="#"&gt; -- select -- &lt;/a&gt;
      &lt;ul class="dropDownList"&gt;
          &lt;li&gt;&lt;span class="filter0"&gt;All&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&lt;span class="filter1"&gt;Filter 1&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&lt;span class="filter2"&gt;Filter 2&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&lt;span class="filter3"&gt;Filter 3&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&lt;span class="filter4"&gt;Filter 4&lt;/span&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
  &lt;/div&gt;    
  &lt;div class="tab-menu"&gt;
  &lt;/div&gt;
  
  &lt;div class="content"&gt;
      &lt;div class="filter1"&gt;1&lt;/div&gt;
      &lt;div class="filter2"&gt;2&lt;/div&gt;
      &lt;div class="filter3"&gt;3&lt;/div&gt;
      &lt;div class="filter4"&gt;4&lt;/div&gt;
      &lt;div class="filter1"&gt;1&lt;/div&gt;
      &lt;div class="filter2"&gt;2&lt;/div&gt;
      &lt;div class="filter3"&gt;3&lt;/div&gt;
      &lt;div class="filter4"&gt;4&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>/*!  OnLoad 
  ---------------------------------------------*/
  $(document).ready(function() {
  
      $('.dropDownSelect').click(function(event) {
          $(this).next().slideToggle(100);
      });
  
      $('.dropDownList li').click(function(event) {
          $(this).parent().slideUp(100);
          $('.dropDownSelect').empty();
          $(this).children().clone().appendTo('.dropDownSelect');
  
          // ShowSelectedClass
          var CheckWhichClassSelected = $('.dropDownSelect').children().attr('class');
          alert(CheckWhichClassSelected);
  
          $('.content div').show();
          if (CheckWhichClassSelected === filter0) {
              return false;
          }
          else {
              $('.content div').not('.' + CheckWhichClassSelected).hide();
          }
  
  
      });
  
  
  });
  </code></pre>
  
  <p><strong>Any help much appreciated.</strong></p>
  
  <p>Pete</p>