Custom Dynamic Filter in Webflow

Community resources Webflow Tips
14

Hi guys.
I have now successfully made the Custom Dynamic Filter in Webflow with a lot of help from Jaro and some changes to the code.
Instead of going back and forth and telling you what you had to do differently, I’ll just tell you how I made it. I also made a video of the process where we also give it some interactions.

Add the code

<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>

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.

8 Likes
Blog filtering options