Dynamic Filtering

One of the most common requests for Webflow CMS sites — category buttons that show and hide collection items instantly, without reloading the page.

The conversation

You: I have a blog page with posts in different categories. I want filter buttons at the top so visitors can click “Design” to only see design posts, or “All” to see everything. The filter buttons are .filter_btn and the blog items are .blog_item.

Claude: To make this work, I’ll need a way to know which category each item belongs to. Can you add a custom attribute called data-category to each .filter_btn (like data-category="design") and the same on each .blog_item?

Also add one button with data-category="all" for the “show all” option.

You: Done! I added the attributes in Webflow.

Claude: The filter is working. Clicking a category button smoothly hides non-matching posts and reveals matching ones. The “All” button shows everything. The active button gets highlighted too.

Check your staging site!

You: That’s great. But when items disappear, there are gaps in the grid. Can it rearrange smoothly?

Claude: Updated — when items hide, the remaining items now slide into place smoothly so there are no gaps.

What you get

• Click a category button to instantly filter collection items
• Smooth transitions as items appear and disappear
• Active button gets a highlighted state
• “All” button resets the view
• Works with any Webflow CMS collection list

Setting up in Webflow

Claude will walk you through this, but here’s what’s needed:

On your filter buttons

1. Select each filter button in the Designer
2. In the element’s Settings panel, add a custom attribute
3. Name: data-category — Value: the category name (like design, development, etc.)
4. One button should have data-category="all"

On your collection items

1. Select the collection item wrapper in the CMS list
2. Add a custom attribute: data-category bound to your CMS category field

Active state styling

Create a combo class called is-active on your filter buttons in Webflow and style it however you like (different color, underline, bold, etc.). Claude’s code will toggle this class automatically.

Variations you can ask for

“Let people select multiple categories at once”

“Add a search box that works together with the category filters”

“Show a ‘No results’ message when no items match”

“Add a count next to each category showing how many items match”