Streaming live at 10am (PST)

Filter Tabs - Hide them when empty outside of CMS collection

Hey guys,

I have this blog post page

And I would love to know the way how to hide the Filter tabs "All | Time Tracking | … when there are no blog posts related to that category…

Currently its set inside of Blog Post Collection as Ref Field -> Category collection.

Is there a way how to do it natively or it will require some custom code?
Thanks very much!

Here is my public share link: [LINK1
(how to access public share link)

Can you share your read-only link?

Hey sorry for late answer:

Here is the link

Why not just delete the category until you decide to write a blog post for it?

Thats a good idea… but webflow doesnt let you create a tabs based inside the collection list… :frowning:

Only way I’ve ever solved this is with custom code, I don’t think Webflow lets you do this out of the box.

Could you plese help me with the custom code? I dont mind going this way.

Sure, put this in the body code of the blog page:

const tabs = document.querySelectorAll('.blog-post-filter-tab-item');
const panes = document.querySelectorAll('.blog-home-articles-wrapper');

panes.forEach((pane, i) => {
    const emptyState = pane.querySelector('.w-dyn-empty');
    if (emptyState) {
        tabs[i].style.display = 'none';

This script will execute after the page loads so there will be a momentary flash where a user could see the tab that gets hidden. If this is a big deal then you would need to set up a loading screen. Otherwise you can just live with it, it’s probably not a big enough deal to worry about.

1 Like