title: jQuery Mixitup remove multiple filter select
body: <p>I am using jQuery <a href="https://mixitup.kunkalabs.com/" rel="nofollow">Mixitup</a> and I'm trying to remove the multiple select logic.</p>
  
  <p>Currently the 'All' filter is active and then when I select the filter for example 'Dogs' then only dogs will show but when I select 'Cats' then 'Dogs' and 'Cats' show.</p>
  
  <p>What I would like it to do is if I select 'Cats' then only 'Cats' show.</p>
  
  <p>Here is my current code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
          /* 
          *   We would normally recommend that all JavaScript is kept in a seperate .js file,
          *   but we have included it in the document head for convenience.
          */
  
          // NICE IMAGE LOADING
  
          /* 
          *   Not part of MixItUp, but this is a great lightweight way 
          *   to gracefully fade-in images with CSS3 after they have loaded
          */
  
          function imgLoaded(img){    
              $(img).parent().addClass('loaded');
          };
  
          // ON DOCUMENT READY:
  
          $(function(){
  
              // INSTANTIATE MIXITUP
  
              $('#Parks').mixitup( {
                  showOnLoad: "featured",
                  layoutMode: 'grid', // Start in list mode (display: block) by default
                  listClass: 'list', // Container class for when in list mode
                  gridClass: 'grid', // Container class for when in grid mode
                  effects: ['fade','blur'], // List of effects 
                  listEffects: ['fade','rotateX'] // List of effects ONLY for list mode
              });
  
              // HANDLE LAYOUT CHANGES
  
              // Bind layout buttons to toList and toGrid methods:
  
              $('#ToList').on('click',function(){
                  $('.button').removeClass('active');
                  $(this).addClass('active');
                  $('#Parks').mixitup('toList');
              });
  
              $('#ToGrid').on('click',function(){
                  $('.button').removeClass('active');
                  $(this).addClass('active');
                  $('#Parks').mixitup('toGrid');
              });
  
              // HANDLE MULTI-DIMENSIONAL CHECKBOX FILTERING
  
              /*  
              *   The desired behaviour of multi-dimensional filtering can differ greatly 
              *   from project to project. MixItUp's built in filter button handlers are best
              *   suited to simple filter operations, so we will need to build our own handlers
              *   for this demo to achieve the precise behaviour we need.
              */
  
              var $filters = $('#Filters').find('li'),
                  dimensions = {
                      region: 'all', // Create string for first dimension
                      recreation: 'all' // Create string for second dimension
                  };
  
              // Bind checkbox click handlers:
  
              $filters.on('click',function(){
                  var $t = $(this),
                      dimension = $t.attr('data-dimension'),
                      filter = $t.attr('data-filter'),
                      filterString = dimensions[dimension];
  
                  if(filter == 'all'){
                      // If "all"
                      if(!$t.hasClass('active')){
                          // if unchecked, check "all" and uncheck all other active filters
                          $t.addClass('active').siblings().removeClass('active');
                          // Replace entire string with "all"
                          filterString = 'all';   
                      } else {
                          // Uncheck
                          $t.removeClass('active');
                          // Emtpy string
                          filterString = '';
                      }
                  } else {
                      // Else, uncheck "all"
                      $t.siblings('[data-filter="all btccup doombencup doomben10000 qldoaks aamistradbroke"]').removeClass('active');
                      // Remove "all" from string
                      filterString = filterString.replace('all','');
                      if(!$t.hasClass('active')){
                          // Check checkbox
                          $t.addClass('active');// adds highlight
                          // Append filter to string
                          filterString = filterString == '' ? filter : filterString+' '+filter;
                      } else {
                          // Uncheck
                          $t.removeClass('active');
                          // Remove filter and preceeding space from string with RegEx
                          var re = new RegExp('(\\s|^)'+filter);
                          filterString = filterString.replace(re,'');
                      };
                  };
  
                  // Set demension with filterString
                  dimensions[dimension] = filterString;
  
                  // We now have two strings containing the filter arguments for each dimension:  
                  console.info('dimension 1: '+dimensions.region);
                  console.info('dimension 2: '+dimensions.recreation);
  
                  /*
                  *   We then send these strings to MixItUp using the filter method. We can send as
                  *   many dimensions to MixitUp as we need using an array as the second argument
                  *   of the "filter" method. Each dimension must be a space seperated string.
                  *
                  *   In this case, MixItUp will show elements using OR logic within each dimension and
                  *   AND logic between dimensions. At least one dimension must pass for the element to show.
                  */
  
                  $('#Parks').mixitup('filter',[dimensions.region, dimensions.recreation])            
              });
  
          });
      &lt;/script&gt;
  </code></pre>