title: Mixitup jquery multiple filters css of controls
body: <p>I'm using the method to set up multiple filtering in mixitup described here:</p>
  
  <p><a href="https://stackoverflow.com/questions/19537742/multiple-filters-in-jquery?rq=1">Multiple filters in jQuery</a></p>
  
  <p>Unfortunately I can't get the active filters highlighted with css. See here:</p>
  
  <p><a href="http://jsfiddle.net/LdVJv/" rel="nofollow noreferrer">http://jsfiddle.net/LdVJv/</a></p>
  
  <p>Help would be appreciated</p>
  
  <p><strong>html</strong></p>
  
  <pre><code>    &lt;div id="filter"&gt; &lt;span&gt;Filter&lt;/span&gt;
  
      &lt;ul class="filter-list"&gt;
          &lt;li data-filter="mix" class="filter" data-dimension="type"&gt;&lt;a href="#"&gt;all&lt;/a&gt;
          &lt;/li&gt;
          &lt;li data-filter="lemon" class="filter" data-dimension="type"&gt;&lt;a href="#"&gt;Lemon&lt;/a&gt;
          &lt;/li&gt;
          &lt;li data-filter="orange" class="filter" data-dimension="type"&gt;&lt;a href="#"&gt;Orange&lt;/a&gt;
          &lt;/li&gt;
          &lt;li data-filter="apple" class="filter" data-dimension="type"&gt;&lt;a href="#"&gt;Apple&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id="filter"&gt; &lt;span&gt;Filter&lt;/span&gt;
  
      &lt;ul class="filter-list"&gt;
          &lt;li data-filter="mix" class="filter" data-dimension="manufacturer"&gt;&lt;a href="#"&gt;all&lt;/a&gt;
          &lt;/li&gt;
          &lt;li data-filter="1" class="filter" data-dimension="manufacturer"&gt;&lt;a href="#"&gt;1&lt;/a&gt;
          &lt;/li&gt;
          &lt;li data-filter="2" class="filter" data-dimension="manufacturer"&gt;&lt;a href="#"&gt;2&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;ul id="grid"&gt;
      &lt;li class="mix lemon 2"&gt;
           &lt;h3&gt;Lemon&lt;/h3&gt;
  
          &lt;p&gt;2&lt;/p&gt;
      &lt;/li&gt;
      &lt;li class="mix orange 1"&gt;
           &lt;h3&gt;Orange&lt;/h3&gt;
  
          &lt;p&gt;1&lt;/p&gt;
      &lt;/li&gt;
      &lt;li class="mix orange 2"&gt;
           &lt;h3&gt;Orange&lt;/h3&gt;
  
          &lt;p&gt;2&lt;/p&gt;
      &lt;/li&gt;
      &lt;li class="mix apple 1"&gt;
           &lt;h3&gt;Apple&lt;/h3&gt;
  
          &lt;p&gt;1&lt;/p&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>// Wait until all images load
  function imgLoaded(img) {
      var $img = $(img);
      $img.closest('.img_wrapper').addClass('loaded');
  }
  
  // Start mixitup
  $('#grid').mixitup();
  
  var $filters = $('.filter-list').find('li'),
      dimensions = {
          type: '',
          manufacturer: ''
      };
  
  $filters.unbind('click');
  
  $filters.on('click', function () {
      var $t = $(this),
          dimension = $t.attr('data-dimension'),
          filter = $t.attr('data-filter');
      console.info("dimension: " + dimension);
      console.info("filter " + filter);
      console.info("current filter for this cat: " + dimensions[dimension]);
      dimensions[dimension] = filter;
      console.info("selected filter for this cat: " + dimensions[dimension]);
      console.info("type: " + dimensions['type']);
      console.info("manufacturer: " + dimensions['manufacturer']);
  
  
      $('#grid').mixitup('filter', [dimensions['type'], dimensions['manufacturer']]);
  });
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>    li {
      list-style: none;
  }
  #grid .mix {
      opacity: 0;
      display: none;
      padding: 10px;
      border: 1px solid #d0d0d0;
      width: 150px;
      margin: 0 0 10px 10px;
  }
  .filter-list li {
      margin-left: 20px;
      cursor: pointer;
      list-style-type: square;
  }
  .filter-list li.active {
      font-weight: 700;
  }
  </code></pre>