title: jQuery Data-Filtering
body: <p>Please see the following link:</p>
  
  <p><a href="http://www.momentapps.co.uk/root" rel="nofollow">http://www.momentapps.co.uk/root</a> </p>
  
  <p>We currently have a list of thumb-nail images that are scrollable, these link to to specific pages. Now on the left we have 4 drop-downs. Inside these drop-downs we have some filters set up, so opening location and selecting US would filter out US companies keeping only US companies. Moving down to "Capability" allows to further filter and for example selecting systems would show all companies who do systems in the US. </p>
  
  <p>At current choosing US brings up US and then selecting systems brings up all systems and not systems specifically from the US.. I'm looking to filter results and then filter results again based on the first selection. This is currently all done in Data-filters but I'm not sure that is gonna cut it.. my jQuery is not the best! </p>
  
  <p>CODE: </p>
  
  <pre><code>&lt;div id="dd" class="wrapper-dropdown-1" tabindex="1"&gt;
          &lt;span&gt;Location&lt;/span&gt;
          &lt;ul class="portfoliofilter" tabindex="1"&gt;
              &lt;li class="filter" data-filter="us"&gt;&lt;a id="hide" href="#"&gt;US&lt;/a&gt;&lt;/li&gt;
              &lt;li class="filter" data-filter="uk"&gt;&lt;a id="hide1" href="#"&gt;UK&lt;/a&gt;&lt;/li&gt;
              &lt;li class="filter" data-filter="thailand"&gt;&lt;a id="hide" href="#"&gt;Thailand&lt;/a&gt;&lt;/li&gt;
              &lt;li class="filter" data-filter="mexico"&gt;&lt;a id="hide" href="#"&gt;Mexico&lt;/a&gt;&lt;/li&gt;
              &lt;li class="filter" data-filter="malaysia"&gt;&lt;a id="hide" href="#"&gt;Malaysia&lt;/a&gt;&lt;/li&gt;
              &lt;li class="filter" data-filter="france"&gt;&lt;a id="hide" href="#"&gt;France&lt;/a&gt;&lt;/li&gt;
              &lt;li class="filter" data-filter="holland"&gt;&lt;a id="hide" href="#"&gt;The Netherlands&lt;/a&gt;&lt;/li&gt;
              &lt;li class="filter" data-filter="all"&gt;&lt;a clase="show_all" id="hide" href="#"&gt; Locations&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>The above is for the drop-downs and the following in was it targets</p>
  
  <pre><code>&lt;div class="filter_list"&gt;
      &lt;ul class="portfolio"&gt;
  
          &lt;li class="item us sub prec engines frame"&gt;
              &lt;div class="portfolioitem"&gt;
              &lt;a name="click" class="active" href="index.html"&gt;&lt;img src="_includes/img/thumbs/absolute.jpg"&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/li&gt;
  
          &lt;li class="item us lra sub com prec frame"&gt;
              &lt;div class="portfolioitem"&gt;
                  &lt;a name="click" class="low" href="_pages/amt.html"&gt;&lt;img src="_includes/img/thumbs/amt.jpg"&gt;&lt;/a&gt;
  
              &lt;/div&gt;
          &lt;/li&gt;
  </code></pre>
  
  <p>etc etc </p>
  
  <p>Thanks </p>