How to Filter Multi-Reference Categories on Webflow Collection Items

The Challenge: When Dynamic Filtering Falls Short

Picture this: You're building a beautiful blog template in Webflow, and you want to showcase related content cards at the bottom of each post. These cards should only display when they share the same category as the current blog post. Sounds straightforward, right?

Here's where it gets tricky. While Webflow's built-in filtering works great for showing only the cards that match your blog post's category, there's a hidden limitation that might catch you off guard.

If those related content cards use multi-reference category fields (allowing them to belong to multiple categories), you hit a wall – Webflow can't filter the displayed categories on each card to show only the matching one.

Why This Matters

Imagine a blog post about "Lifelong Learning" that displays related content cards. One of those cards might be tagged with three categories: "Lifelong Learning," "Wonder & Reflection," and "Curiosity in Practice." Without proper filtering, all three category tags appear on the card, creating visual clutter and confusing your readers about why this content is related.

What you really want is clean, contextual design – showing only the "Lifelong Learning" tag that matches your current blog post, making the connection crystal clear for your readers.

The Solution: A Touch of JavaScript Magic

While Webflow's native tools can't solve this directly, a small JavaScript snippet can bridge the gap.

This solution compares the main blog post's category against all the categories displayed on your related content cards, hiding the ones that don't match.

Setting Up Your Collections

Before getting into the code, let's ensure your Webflow structure is properly configured:

1. Categories Collection

Create a central Categories collection that connects to both your Blog Posts and your additional content collection (in this example, the additional content collection is "Segments", but it can be whatever you want it to be).

2. Blog Collection Setup

Your Blog collection needs a single reference field for the main category. While this can technically be a multi-reference field, the code below is optimized for single references and would need to be rewritten to handle multi-reference checking, so lets stick to single reference checking for now. It makes the comparison more straightforward.

3. Related Content Collection

Your related content collection (Segments, Resources, CTAs, etc.) should use a multi-reference field for categories, allowing flexible categorization. This way you can reuse content across different blog posts categorized differently.

Implementing on Your Blog Template

Now let's set up the visual structure on your blog template page:

1. Display the Main Blog Category

Add your blog post's category somewhere on the page (often in the hero or metadata section). This will serve as our comparison point.

You need to apply a data-attribute to the blog post category. It is our target so it will get the data-attribute of → data-category-target

2. Add Your Related Content Collection

Insert a Collection List (or Collection List Wrapper for sliders) bound to your related content. Inside each item, add another Collection List to display the multi-reference categories.

The standard-slider is connected to a Collection List (collection lists display as purple) and the categories on the slider cards are connected to the CMS. Both are connected through collection lists.

3. Style Your Category Tags Container

For the category tags wrapper → blog-slider_category-wrapper , apply these crucial styles:

• display: flex
• flex-direction: row (displays horizontally)

This ensures that when non-matching categories are hidden, the remaining category aligns properly instead of floating in the center.

4. Add an attribute to your category

The multi-reference category you are checking against the main category should get a data-attribute of → data-category-reference

In our example, this attribute is added to the text content → blog-slider_eyebrow

5. Set Up Conditional Filtering

Configure your Collection List to show only items where at least one category matches the current blog post's category.

The JavaScript Solution

Here's where the magic happens. Add these custom attributes to your elements:

• Main blog category: data-category-target
• Each category tag in your related content: data-category-reference

Then add this script to your page's custom code (before tag):

How It Works

1. On page load, the script waits for the DOM to be ready
2. It finds the main blog post's category text
3. It compares this against every category tag in your related content
4. It hides any categories that don't match

The result? Clean, contextual category tags that reinforce why each piece of content is relevant to your reader.

The Final Result

When implemented correctly, your blog posts will display related content with only the matching category visible, creating a cleaner, more intuitive user experience. Instead of seeing all three categories on that "Integrating Technology with Mindfulness" card, visitors to your post categorized as "Lifelong Learning" will see only the "Lifelong Learning" tag – making the connection immediately clear.

Taking It Further

This technique opens up several possibilities:

• Multiple matching categories: Modify the code to handle blog posts with multiple categories. Here is the code modified to handle multiple matching categories.

⛔ You may need to adjust your filtering in Webflow to accommodate hiding the actual cards that don’t match the categories of the article. This functionality was not tested during the setup and it may or may not work. Proceed with caution.

In other words, you may end up hiding a card that should match the category of the blog post. Or you may not be able to make this comparison since you would have to add a CMS collection to handle displaying multiple categories on the blog post like we are doing on the slider. In this instance, Webflow may not allow you to compare the categories.

Again, I haven’t test this in this scenario as it was a project I was working on and the project scope called for showing one category per blog post.

⛔The code below doesn’t handle the hiding and showing of the actual cards. It is a setup that shows how to hide and show cards that match one category and then how to hide and show the categories on the cards themselves.

In other words, the code below is handling the hiding and showing of the categories that don’t match the current blog post, not the entire card.

EX: Lifelong Learning is the category applied to the blog post article. But there are two other categories on the card - wonder & reflection and curiosity in practice. These additional two categories don’t match the blog post categories, thus, they are hidden.

That is not to say you couldn’t modify the code to hide the card. You can do that. If this will play nice with a slider, I don’t know as the slider renders content when the DOM loads. Hiding and showing these cards would be handled with display: none; rather than server side like Webflow does with their conditional logic.

<script>
// Filter categories to show only those matching the main blog categories
document.addEventListener("DOMContentLoaded", () => {
  // 1. Find ALL main blog post categories (multiple)
  const targetEls = document.querySelectorAll("[data-category-target]");
  if (!targetEls.length) return;
  
  // 2. Create an array of all target categories
  const targetCategories = Array.from(targetEls).map(el => el.textContent.trim());
  
  // 3. Loop through all multi-reference category tags
  document.querySelectorAll("[data-category-reference]").forEach(ref => {
    const refCategory = ref.textContent.trim();
    
    // 4. Check if this reference category matches ANY of the target categories
    if (!targetCategories.includes(refCategory)) {
      // Hide non-matching categories
      ref.style.display = "none";
      
      // Alternative: Add a utility class instead
      // ref.classList.add("hide");
    }
  });
});
</script>

• Visual indicators: Add animations or special styling to matching categories instead of hiding others. Instead of adding displaying none to the categories that don’t match.

Add a combo class to the category that does match. The combo class would hold the rules to the styling for the category that does match.

This is not the best use case in our setup, but you may find a use for it in other scenarios.

Conclusion

While Webflow's visual development environment is incredibly powerful, some scenarios require a bit of custom code to achieve the exact user experience you envision.

This solution demonstrates how a small JavaScript snippet can enhance Webflow's native functionality, creating more refined and contextual designs.

The beauty of this approach is its simplicity – no external libraries, no complex logic, just a straightforward comparison that runs once when the page loads.

It's a perfect example of how custom code can complement Webflow's capabilities without overcomplicating your project.

Have you encountered similar limitations in Webflow? What creative solutions have you developed? Share your experiences in the comments below!

‍

<script>
// Filter categories to show only those matching the main blog category
document.addEventListener("DOMContentLoaded", () => {
  // 1. Find the main blog post's category
  const targetEl = document.querySelector("[data-category-target]");
  if (!targetEl) return;
  const targetCategory = targetEl.textContent.trim();

  // 2. Loop through all multi-reference category tags
  document.querySelectorAll("[data-category-reference]").forEach(ref => {
    if (ref.textContent.trim() !== targetCategory) {
      // Hide non-matching categories
      ref.style.display = "none";

      // Alternative: Add a utility class instead
      // ref.classList.add("hide");
    }
  });
});
</script>