# CMS Combine + Static to Collection List

**URL:** <https://forum.finsweet.com/t/cms-combine-static-to-collection-list/1905>\
**Category:** Attributes\
**Created:** [September 12, 2023, 8:50pm UTC](https://forum.finsweet.com/t/cms-combine-static-to-collection-list/1905 "2023-09-12T20:50:12Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![info2](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/info2/32/359_2.png) [@info2](https://forum.finsweet.com/u/info2)\
**Post date:** [September 12, 2023, 8:50pm UTC](https://forum.finsweet.com/t/cms-combine-static-to-collection-list/1905/1 "2023-09-12T20:50:12Z")

</div>

Hey there,

I’m trying to use CMS Combine with CMS Filter and Static to Collection List.

When adding in the ‘Static to Collection List’ library, the Combined collection except for the first one is hidden. On top of that, I’m looking to limit to only 3 items after the combined list.

Any suggestions on the following?

---

<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 13, 2023, 10:55am UTC](https://forum.finsweet.com/t/cms-combine-static-to-collection-list/1905/2 "2023-09-13T10:55:40Z")

</div>

Hey @info2! Can you share a link?

Also, what do you mean by limiting the collection to only 3 items after the combined list? I believe you can set this up natively in Webflow before combining the lists

---

<div class="post-metadata">

**Author:** ![info2](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/info2/32/359_2.png) [@info2](https://forum.finsweet.com/u/info2)\
**Post date:** [September 13, 2023, 5:31pm UTC](https://forum.finsweet.com/t/cms-combine-static-to-collection-list/1905/3 "2023-09-13T17:31:41Z")

</div>

Here the staging link Luis. [https://vitally-2023.webflow.io/cc-test](https://vitally-2023.webflow.io/cc-test)

Basically I want to limit the list after CMS Combine runs to only 3 items. Also want to mention that the Static element is hidden as it would hide majority of the rendered list when attributes are connected.

Here is the page I want to replicate but using CMS Combine to allow users to choose which CMS item to feature.

> **[Success Network](https://vitally-2023.webflow.io/success-network)**
>
> Discover the latest content, research strategies, and thoughts from today's leaders in Customer Success.

---

<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 14, 2023, 10:08am UTC](https://forum.finsweet.com/t/cms-combine-static-to-collection-list/1905/4 "2023-09-14T10:08:36Z")

</div>

Will the selection of items be handled by CMS Filter? If so we can add some JS to the CMS Filter callback to add a `hide` class to all but the first 3 items in the list.

I’m not quite sure I 100% understand what you are trying to do 😅 could you record a quick loom?

---

<div class="post-metadata">

**Author:** ![info2](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/info2/32/359_2.png) [@info2](https://forum.finsweet.com/u/info2)\
**Post date:** [September 19, 2023, 5:41pm UTC](https://forum.finsweet.com/t/cms-combine-static-to-collection-list/1905/5 "2023-09-19T17:41:53Z")

</div>

Hey Luis, here is a quick Loom to give you an overview of what we’re trying to achieve as well as the roadblocks.

---

<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 20, 2023, 9:53am UTC](https://forum.finsweet.com/t/cms-combine-static-to-collection-list/1905/6 "2023-09-20T09:53:33Z")

</div>

Hey @info2, there is no native way of limiting the items shown in a collection list. A hacky solution for this could be to incorporate CMS Load and paginate the list to 3 items per page then hide the nav buttons. This would allow you to filter and sort the list with Attributes and still only have 3 items shown on the first page.

Another way to do this is to add some code that hides the rest of the items. Let me know which approach you’d like to go with and once we have it setup we can tackle the Static element issue.

---

<div class="post-metadata">

**Author:** ![info2](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/info2/32/359_2.png) [@info2](https://forum.finsweet.com/u/info2)\
**Post date:** [September 20, 2023, 4:34pm UTC](https://forum.finsweet.com/t/cms-combine-static-to-collection-list/1905/7 "2023-09-20T16:34:15Z")

</div>

Lets try with the code solution, its good to know the other option which I can try in the future.

---

<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 21, 2023, 12:18pm UTC](https://forum.finsweet.com/t/cms-combine-static-to-collection-list/1905/8 "2023-09-21T12:18:20Z")

</div>

Hey @info2, here is some script I’ve come up with. You can test without the setTimeout as the speeds should be better when published

```auto
<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmssort',
    (listInstances) => {
      console.log('cmssort Successfully loaded!');

      const sortBtn = document.querySelector('[fs-cmssort-element="trigger"]');

      sortBtn.addEventListener('click', () => {
        setTimeout(() => {
          const list = document.querySelector('[fs-cmscombine-element="list"]');
          const listItems = list.querySelectorAll('.cl-item');

          const startIndex = listItems.length - 2;

          for (let i = startIndex; i < listItems.length; i++) {
            listItems[i].classList.add('hide');
          }
        }, 400);
      });
    },
  ]);
</script>

```

You can always build up from here.

---

<div class="post-metadata">

**Author:** ![info2](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/info2/32/359_2.png) [@info2](https://forum.finsweet.com/u/info2)\
**Post date:** [September 21, 2023, 5:05pm UTC](https://forum.finsweet.com/t/cms-combine-static-to-collection-list/1905/9 "2023-09-21T17:05:54Z")

</div>

Awesome this seem to have worked, now how would we make static element work in this stack?

---

<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 22, 2023, 8:52am UTC](https://forum.finsweet.com/t/cms-combine-static-to-collection-list/1905/10 "2023-09-22T08:52:29Z")

</div>

You’ll need to add `fs-cmsstatic-interactive="true"` to your static element and use the original script

```auto
<!-- [Attributes by Finsweet] CMS Static -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsstatic@1/cmsstatic.js"></script>

```

This should be able to replicate the original page you sent me