# Filtering CMS with sub filter

**URL:** <https://forum.finsweet.com/t/filtering-cms-with-sub-filter/3176>\
**Category:** Attributes\
**Tags:** cmsfilter, cmsnest\
**Created:** [July 26, 2024, 7:56am UTC](https://forum.finsweet.com/t/filtering-cms-with-sub-filter/3176 "2024-07-26T07:56:01Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![pash](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/pash/32/1621_2.png) [@pash](https://forum.finsweet.com/u/pash)\
**Post date:** [July 26, 2024, 7:56am UTC](https://forum.finsweet.com/t/filtering-cms-with-sub-filter/3176/1 "2024-07-26T07:56:01Z")

</div>

Hey Team, help me to understand with filtering and subfiltering in such design case. Design attached.

**ALLE** is by default if it’s possible and on click any other filter it opens sub filter with title and three more filters

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/finsweet1/original/2X/7/7fa460fa14e02f5730a99bd703e8189e111cdeb3.jpeg)

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/finsweet1/original/2X/f/f298e4aa2fe2927e6aa4de81cc1904d5e10736f2.jpeg)  
and there must a pagination when it’s needed and hide when less then 12 objects on the filtered Category.  
 ![image](https://europe1.discourse-cdn.com/flex013/uploads/finsweet1/original/2X/1/14c8be4aac8ec11a25d81fa9734fa9fe8f3cda75.png)

I think this video could help a bit  
[https://www.youtube.com/watch?v=qq4uM0-R5BA&t=311s](https://www.youtube.com/watch?v=qq4uM0-R5BA&t=311s)

---

<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:** [July 26, 2024, 11:52am UTC](https://forum.finsweet.com/t/filtering-cms-with-sub-filter/3176/2 "2024-07-26T11:52:32Z")

</div>

Hey @pash! Both of these features can be achieved with some custom code, for the first one I would need a link to test accordingly.

For the second one, we can use this on the `</body>` section of the custom code.

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

      const [filterInstance] = filterInstances;
      const { listInstance } = filterInstance;

      listInstance.on('renderitems', (renderedItems) => {
        console.log(renderedItems);
        if (listInstance.validItems.length <= listInstance.originalItemsPerPage) {
          listInstance.paginationWrapper.classList.add('hide');
        } else {
          listInstance.paginationWrapper.classList.remove('hide');
        }
      });
    },
  ]);
</script>

```

This should hide the pagination wrapper if the valid items, an array with the results, is lesser than or equal to the original number of items per page, set in Webflow pagination settings.

Here is a quick demo of how the code works!

https://www.loom.com/embed/b58003937ba94388a7e9ab3b76cb12ef

---

<div class="post-metadata">

**Author:** ![pash](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/pash/32/1621_2.png) [@pash](https://forum.finsweet.com/u/pash)\
**Post date:** [August 7, 2024, 2:29pm UTC](https://forum.finsweet.com/t/filtering-cms-with-sub-filter/3176/3 "2024-08-07T14:29:40Z")

</div>

Thanks @Support-Luis but I’ve done it with native Webflow Tabs 🫠I appreciate your help and time.

---

<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:** [August 7, 2024, 2:41pm UTC](https://forum.finsweet.com/t/filtering-cms-with-sub-filter/3176/4 "2024-08-07T14:41:11Z")

</div>

No worries! Glad you found a way 💪