title: Tag filter list
body: <p>I've created tag filter list based on some internet source. With 3 categories of presented filter (Composition, People, Theme) the user should be able to pick up one from any list and after the list should exclude the items that don't have the selected tag. </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;h2&gt;Composition&lt;/h2&gt; 
  &lt;ul class="filter" id="composition"&gt;
      &lt;li&gt;&lt;a data-value="all"&gt;All&lt;/a&gt; &lt;/li&gt;
      &lt;li&gt;&lt;a data-value="landscape"&gt;Landscape&lt;/a&gt;&lt;/li&gt; 
      &lt;li&gt;&lt;a data-value="portait"&gt;Portait&lt;/a&gt; &lt;/li&gt;
      &lt;li&gt;&lt;a data-value="square"&gt;Square&lt;/a&gt; &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;h2&gt;People&lt;/h2&gt;
  &lt;ul class="filter" id="people"&gt;
      &lt;li&gt;&lt;a data-value="all"&gt;All&lt;/a&gt; &lt;/li&gt;
      &lt;li&gt;&lt;a data-value="people"&gt;People&lt;/a&gt;&lt;/li&gt; 
      &lt;li&gt;&lt;a data-value="nopeople"&gt;No People&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;h2&gt;Theme&lt;/h2&gt;
  &lt;ul class="filter" id="theme"&gt;
      &lt;li&gt;&lt;a data-value="all"&gt;All&lt;/a&gt; &lt;/li&gt;
      &lt;li&gt;&lt;a data-value="Nature"&gt;Nature&lt;/a&gt;&lt;/li&gt; 
      &lt;li&gt;&lt;a data-value="Fashion"&gt;Fashion&lt;/a&gt;&lt;/li&gt; 
      &lt;li&gt;&lt;a data-value="Mountains"&gt;Mountains&lt;/a&gt;&lt;/li&gt; 
      &lt;li&gt;&lt;a data-value="Sea"&gt;Sea&lt;/a&gt;&lt;/li&gt;    
  &lt;/ul&gt;
  
  &lt;h2&gt;Data to filter&lt;/h2&gt;
  &lt;ul&gt; 
      &lt;li class="item landscape people Nature"&gt;landscape people Nature&lt;/li&gt; 
      &lt;li class="item portait nopeople Fashion"&gt;portait nopeople Fashion&lt;/li&gt; 
      &lt;li class="item landscape people Mountains"&gt;landscape people Mountains&lt;/li&gt; 
      &lt;li class="item portait people Sea"&gt;portait people Sea&lt;/li&gt; 
      &lt;li class="item square people Mountains"&gt;square people Mountains&lt;/li&gt; 
      &lt;li class="item landscape people Fashion"&gt;landscape people Fashion&lt;/li&gt; 
      &lt;li class="item square nopeople Sea"&gt;square nopeople Sea&lt;/li&gt; 
      &lt;li class="item landscape nopeople Mountains"&gt;landscape nopeople Mountains&lt;/li&gt; 
      &lt;li class="item portait people Fashion"&gt;portait people Fashion&lt;/li&gt; 
      &lt;li class="item square nopeople Sea"&gt;square nopeople Sea&lt;/li&gt; 
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>$(document).ready(function() 
          { 
              $("ul.filter li a").click(function() 
              { 
                  $(this).closest('ul').find('a').removeClass('selected');
                  $(this).addClass('selected');
                  var composition    = $('ul#composition li a.selected').data('value'); 
                  var people    = $('ul#people li a.selected').data('value');
                  var theme    = $('ul#theme li a.selected').data('value');
                  var compositionSelector = ''; 
                  var peopleSelector = '';  
                  var themeSelector = '';        
  
                  if (composition == "all" &amp;&amp; people == "all" &amp;&amp; theme == "all") 
                  { 
                      //show all items 
                      $(".item").show(); 
                  } 
                  else 
                  { 
  
                      if (theme != "all") 
                      { 
                          themeSelector = '.' + theme ;
                      } 
  
                      if (people != "all") 
                      { 
                          peopleSelector = '.' + people ;
                      } 
  
                      if (composition != "all") 
                      { 
                          compositionSelector = '.' + composition ;
                      } 
  
  
                      $(".item").hide(); 
                      $(compositionSelector + peopleSelector + themeSelector).show(); 
                  } 
  
              }); 
          });
  </code></pre>
  
  <p>Fiddle: <a href="https://jsfiddle.net/22vh08ah/" rel="nofollow">https://jsfiddle.net/22vh08ah/</a></p>