Filter Tabs - Hide them when empty outside of CMS collection

Design help CMS
8

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