Made by Jaro Quastenberg

Time 20 January 2018

How to

https://forum.webflow.com/t/custom-dynamic-filter-in-webflow/49601/13

Code with ALL category

<script>
// Dynamic Filter
$(document).ready(function() {
  
  	// Code#001: Set Slug Variables
  	var slug = function(str) {
    var $slug = '';
    var trimmed = $.trim(str);
    $slug = trimmed.replace(/[^a-z0-9-]/gi, '-').
    replace(/-+/g, '-').
    replace(/^-|-$/g, '');
    return $slug.toLowerCase();
	}

	// Code#002: Add Classes to Collection List Items
  	$('#filter-list .w-dyn-item').each(function () {
    									   // The five Category Text Blocks
      	var category1 = slug($(this).find('.category-inlay:nth-child(1)').text());
      	var category2 = slug($(this).find('.category-inlay:nth-child(2)').text());
      	var category3 = slug($(this).find('.category-inlay:nth-child(3)').text());	
      	var category4 = slug($(this).find('.category-inlay:nth-child(4)').text());
      	var category5 = slug($(this).find('.category-inlay:nth-child(5)').text());
      
      	$(this).addClass(category1);
      	$(this).addClass(category2);
      	$(this).addClass(category3);
      	$(this).addClass(category4);
      	$(this).addClass(category5);
	});
  	
  	// Code#003: Show & Hide Items when Filter Navigation is clicked
	$('.filter-item').click(function(){
      
 		var navigationCategory = slug($(this).text());
      
      	setTimeout(function() { $('#filter-list .w-dyn-item').css('display', 'none'); }, 500);
		setTimeout(function() { $('.' + navigationCategory).css('display', 'block'); }, 500);;
      
      	$('.filter-item').removeClass('filter-active');
      	$(this).addClass('filter-active');
	});
  
  
  	// Code#004: Show All
  	$('.filter-item:first-child').click(function(){
      
      	setTimeout(function() { $('#filter-list .w-dyn-item').css('display', 'block'); }, 500);
	});
  
  	// Code#005: Set Active for Category "All"
  	$('.filter-item:first-child').addClass('filter-active');
  
});
</script>

Instructions

Add the new code to the page you are working on or on site level. What ever you prefer and if you are using the filter on multiple pages. Page: Edit page details > Custom code> Before /body tag Site: Project settings > Custom code > Footer Code

Create the Category CMS Collection.

Create the categories. Create all categories you want + one category called ALL where you set the sort number to 1.

Create the content CMS Collection

Create the CMS content

Create the page content The filter items

Styling the active filter items.

This is to difference the inactive and active filter item. I set the inactive (initial state) to 60% opacity. And the Active State to 100% opacity.

The content