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.

• Name: Name of category
• Add a number field
• Name it sort order

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 reference field (from 1-10 depending on what you want)
• Create the rest of the content fields.

Create the CMS content

• Add the references. (you don’t have to use all the fields)
• Populate the rest of the content.

Create the page content The filter items

• Add a collection list and link it to the categories.
• Add a Text Block and style it as you please.
• Give the Collection item a Class or Subclass of filter item
• Set the sort order to:
• Order, Larges to smallest (this puts the ALL to the front)
• Name, Alphabetical (this sorts the rest of the categories alphabetical)

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.

• Set Filter Item opacity to 60%
• Add a Text Block to anywhere on the page.
• Give it the class name of Filter Active
• Set opacity to 100%
• Delete the text block

The content

• Add collection list and link it to the content
• Give the Collection list the ID: filter-list
• Add a div that will contain the Categories
• Add same amount of Text Blocks that you have reference fields and link it to each field
• Give the text block a Class or subclass of Category Inlay
• Style it as you please.
• Add the rest of the content in a separate Div and style it as you please.

Publish the site and test.

Code with FIRST 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#005: Set Active for Category "All"
  	$('.filter-item:first-child').addClass('filter-active').trigger('click');
  
});
</script>