# CMS Filter + Nest

**URL:** https://forum.finsweet.com/t/cms-filter-nest/3480
**Category:** Attributes
**Tags:** cmsfilter, cmsnest
**Created:** [September 23, 2024, 12:56pm UTC](https://forum.finsweet.com/t/cms-filter-nest/3480 "2024-09-23T12:56:05Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![kevin](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/kevin/32/2760_2.png) [@kevin](https://forum.finsweet.com/u/kevin)
#### Post date: [September 23, 2024, 12:56pm UTC](https://forum.finsweet.com/t/cms-filter-nest/3480/1 "2024-09-23T12:56:05Z")

</div>

I’m struggling with CMS Filter + Nest. I’m assuming it’s some sort of load order issue… but I need a second set of eyes.

[https://www.synbiobeta.com/dev-pages/homepage-update-june-2024](https://www.synbiobeta.com/dev-pages/homepage-update-june-2024)

There is a tab section toward the bottom of the page which I’m working on the Human Health tab first.

I have categories nesting in almost all the collections on the page.

For this one, I’m trying to default the filter on this tab to two of the categories, but it doesn’t seem to be working at all (eventually, the filter will be hidden). Meaning the Nest never actually happens so the filter can’t work.

---

<div class="post-metadata">

### Author: ![kevin](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/kevin/32/2760_2.png) [@kevin](https://forum.finsweet.com/u/kevin)
#### Post date: [September 23, 2024, 5:02pm UTC](https://forum.finsweet.com/t/cms-filter-nest/3480/2 "2024-09-23T17:02:44Z")

</div>

Here is the read only link

[https://preview.webflow.com/preview/synbiobeta?utm\_medium=preview\_link&utm\_source=designer&utm\_content=synbiobeta&preview=f5c59e61d10fc37a622f6dc8e66a899d&pageId=6671ba8ab78cddfd9ebd601c&workflow=preview](https://preview.webflow.com/preview/synbiobeta?utm_medium=preview_link&utm_source=designer&utm_content=synbiobeta&preview=f5c59e61d10fc37a622f6dc8e66a899d&pageId=6671ba8ab78cddfd9ebd601c&workflow=preview)

---

<div class="post-metadata">

### Author: ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)
#### Post date: [September 23, 2024, 6:56pm UTC](https://forum.finsweet.com/t/cms-filter-nest/3480/3 "2024-09-23T18:56:09Z")

</div>

Hey @kevin! One of the reasons this is failing is because we are currently missing an attribute on the list element.

 ![Screenshot 2024-09-23 at 20.43.49](https://europe1.discourse-cdn.com/flex013/uploads/finsweet1/original/2X/a/a5a329a91da811c45eda809c143bb3f656511067.jpeg)

Another issue I spotted, that may be local to my override is the use of the “&” symbol. Please add the missing attribute above and let me know if the filtering is working as expected, if not please try removing the “&” from both the filter UI and the category cards.

Another setup option is to manually set the filters inside Webflow. As shown below

 ![Screenshot 2024-09-23 at 20.53.55](https://europe1.discourse-cdn.com/flex013/uploads/finsweet1/original/2X/7/788c3610a822dc2e1a0da10eaf102777d0c0c50a.jpeg)

This will remove the need to replicate the setup for all the needed tabs. Plus we will also remove the need to load the complete collection multiple times, once for each tab.

---

<div class="post-metadata">

### Author: ![kevin](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/kevin/32/2760_2.png) [@kevin](https://forum.finsweet.com/u/kevin)
#### Post date: [September 23, 2024, 7:21pm UTC](https://forum.finsweet.com/t/cms-filter-nest/3480/4 "2024-09-23T19:21:27Z")

</div>

The nest attribute on the list, fixed nest (Honestly I never would have gotten there myself haha)

After that, the filters still didn’t work. I removed the & and replaced with “and” in both places and still didn’t work.

From my understanding of the built-in webflow filters, it will only filter by saying filter 1 and filter 2.

What I’m trying to overcome with CMSfilter is I need those that include Filter 1 or filter 2.

---

<div class="post-metadata">

### Author: ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)
#### Post date: [September 23, 2024, 7:28pm UTC](https://forum.finsweet.com/t/cms-filter-nest/3480/5 "2024-09-23T19:28:30Z")

</div>

Hey @kevin!

> From my understanding of the built-in webflow filters, it will only filter by saying filter 1 and filter 2.  
> What I’m trying to overcome with CMSfilter is I need those that include Filter 1 or Filter 2.

Aren’t we trying to filter by filter 1 and filter 2 by having these two checkboxes checked on page load? 🤔

If not, then the setup may be failing for the following reason

There is a special character here. My recommendation is to clear the checkbox label completely and type it again. This should get rid of special characters

 ![Screenshot 2024-09-23 at 21.25.38](https://europe1.discourse-cdn.com/flex013/uploads/finsweet1/original/2X/4/44a9468f7df1eccf3fd3f2f6f55a62073afd41e2.jpeg)

---

<div class="post-metadata">

### Author: ![kevin](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/kevin/32/2760_2.png) [@kevin](https://forum.finsweet.com/u/kevin)
#### Post date: [September 23, 2024, 8:11pm UTC](https://forum.finsweet.com/t/cms-filter-nest/3480/6 "2024-09-23T20:11:26Z")

</div>

Here is what I think is happening

So page loads 8 items in the collection, none of those items include CMSNested category/filter of “Food & Nutrition” so when I filter based on that - there is nothing for the page to actually filter.

If you look at the published pages behavior right now, on load nothing shows. After you unselect both filters - 8 articles show, once you select the health and medicine check box - you get the 3 items that have that nested category in the original 8 items.

* * *

The behavior I’m looking for, is on load it shows the latest 8 articles that have a tag of either Food and Nutrition or Health and Medicine. So I think this is where my issue lies, on load I’m not getting those onto the page.

---

<div class="post-metadata">

### Author: ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)
#### Post date: [September 24, 2024, 10:56pm UTC](https://forum.finsweet.com/t/cms-filter-nest/3480/7 "2024-09-24T22:56:20Z")

</div>

Hey @kevin! for the first tab we can use this snippet to click the filters once all scripts have loaded, I just need you to remove the “Starts checked” option from the filters.

```js
<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsload',
    (listInstances) => {
      window.fsAttributes.cmsnest.init();
      document.querySelectorAll('[fs-cmsfilter-field]').forEach((e) => {
        e.textContent = e.textContent.trim();
      });

      window.fsAttributes = window.fsAttributes || [];
      window.fsAttributes.push([
        'cmsnest',
        (listInstances) => {
          window.fsAttributes.cmsfilter.init();
          document.getElementById('checkbox-2').click();
          document.getElementById('checkbox').click();
        },
      ]);
    },
  ]);
</script>

```

Since you want to filter the list for each tab change, we can use [Mirror Click Events - Mirror a click from one element to another](https://finsweet.com/attributes/mirror-click-events) to mirror the user click on each tab to the required filters. Any `fs-mirrorclick-element = trigger` will mirror its click to any `fs-mirrorclick-element = target` element with the same instance. (Meaning you can have multiple targets for a single trigger)

 ![Screenshot 2024-09-25 at 00.54.18](https://europe1.discourse-cdn.com/flex013/uploads/finsweet1/original/2X/9/98a66fc8297bd71879b15faa4a98b876ccdd1e1b.png)

Also, remember you’ll have to setup multiple instances of CMS Filter following the setup below, one for each tab

 ![Screenshot 2024-09-25 at 00.55.20](https://europe1.discourse-cdn.com/flex013/uploads/finsweet1/original/2X/c/c4b4edba8b80355ca582d1ad57f6e0cd4d18021f.png)

Let me know how it goes!
