Webflow Multi-Filtering

filter.html

<script src="https://newjersey.github.io/mixitup/dist/mixitup.min.js"></script>
<script src="https://newjersey.github.io/mixitup-multifilter/dist/mixitup-multifilter.min.js"></script>

<script>
  (function() {
    function slugify(str) {
      return str.replace(/\W/g, '');
    }
    
    function makeClassName(dimensionName, dimensionValue) {
      return dimensionName + '-' + slugify(dimensionValue);
    }

    /* Decorate policy boxes with classes to allow us to filter them. */
    $('.policy-solution-block', 'div.catelog').each(function(i, policyEl) {
      var $policyEl = $(policyEl);

      $policyEl.addClass('mix');

      $('.dimension-values', $policyEl).each(function (j, dimensionEl) {
        var $dimensionEl = $(dimensionEl);
        var dimensionName = $dimensionEl.data('filter-dimension-name');
        var dimensionValues = $dimensionEl.text().split(',');

        for (var i = 0; i < dimensionValues.length; i++) {
          $policyEl.addClass(makeClassName(dimensionName, dimensionValues[i]));
        }
      });
    }); 
    
    /* Decorate filter controls with data attributes and attach event listeners. */
    $('[data-filter-group]').each(function(i, filterGroupEl) {
      $('label', filterGroupEl).each(function(j, labelEl) {
        var $labelEl = $(labelEl);
        var $input = $('input', $labelEl);
        var dimensionName = $input.closest('[data-filter-group]').data('filter-group');
        var dimensionValue = $labelEl.text();

        $input.attr('value', '.' + makeClassName(dimensionName, dimensionValue));
      });
	});

    var mixer = mixitup($('.catelog > div > .collection-list'), {
      multifilter: {
        enable: true // enable the multifilter extension for the mixer
      }
	});
  })();
</script>