Streaming live at 10am (PST)

Filter Tabs - Hide them when empty outside of CMS collection

Hey guys,

I have this blog post page
–> https://www.hourly.io/blog

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


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

Can you share your read-only link?

https://help.webflow.com/article/how-do-i-share-my-sites-read-only-link

Hey sorry for late answer:

https://preview.webflow.com/preview/hourly-app?utm_medium=preview_link&utm_source=designer&utm_content=hourly-app&preview=710d5aa49d4a09c32094e52c0834dfdb&pageId=5e6ac85e3dfad897c6c8c72f&mode=preview

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:

<script>
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';
    }
});
</script>

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