Hide 'Clear All' filter if no filters are selected

[timd]

I’m trying to figure out how to hide my ‘Clear All’ link when no filters are selected.

Here is the element on the frontend. ‘.is-active’ doesn’t seem to add/remove itself in this case but I have is-active hard-set as a combo class in Webflow (if that matters).

<a fs-mirrorclick-element="target" fs-cmsfilter-element="clear" fs-cmsfilter-active="is-active" href="#" class="filter-ui_clear-button is-active">Clear all</a>

I’ve tried searching for a solution but couldn’t find anything, please let me know if I’m missing something obvious!

[Support-Luis]

Hey @timd! I am not sure if the “Clear All” link will receive the .is-active class as it is not a fs-cmsfilter-field element. We can go with some custom code if you share a published link

[timd]

Hi @Support-Luis I can share a public link (& password) via DM, is that possible? Happy for the solution to be shown here once the site is launched, however, I can’t share publicly at this point.

[edrock]

@Support-Luis I am piggybacking off this thread, as I am also looking for a simular solution. Is it possible to hide/show an element based on if any of the filter fields are selected?

I used the fs-cmsfilter-element=“reset” on a text-link, however, I would prefer it to be hidden unless a filter field is selected.
Thank you.

[Support-Luis]

Hey @edrock! We used some custom code to manage this. The CMS Filter API provides a filtersActive boolean but it seems it does not update immediately so a slight delay is needed. You are welcome to expand this code yourself and please do share if you find a better solution!

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsfilter',
    (filterInstances) => {
      console.log('cmsfilter Successfully loaded!');

      const [filterInstance] = filterInstances;
      const clearLink = document.querySelector('[fs-cmsfilter-element="clear"]');

      const updateClearLinkDisplay = () => {
        filterInstance.filtersActive
          ? (clearLink.style.display = 'block')
          : (clearLink.style.display = 'none');
      };

      updateClearLinkDisplay();

      filterInstance.listInstance.on('renderitems', (renderedItems) => {
        setTimeout(() => {
          updateClearLinkDisplay();
        }, 125);
      });
    },
  ]);
</script>

[edrock]

That worked perfectly. Thank you.

[timd]

Thanks @Support-Luis I’ve to to mark your last post as solution but can’t find the button anymore! Worked perfectly.

[timd]

Nevermind, found it!