# Can I use combine on more than one list (set) on the page?

**URL:** <https://forum.finsweet.com/t/can-i-use-combine-on-more-than-one-list-set-on-the-page/2658>\
**Category:** Attributes\
**Created:** [March 20, 2024, 12:58pm UTC](https://forum.finsweet.com/t/can-i-use-combine-on-more-than-one-list-set-on-the-page/2658 "2024-03-20T12:58:05Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![ryann.mccorkell](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/ryann.mccorkell/32/915_2.png) [@ryann.mccorkell](https://forum.finsweet.com/u/ryann.mccorkell)\
**Post date:** [March 20, 2024, 12:58pm UTC](https://forum.finsweet.com/t/can-i-use-combine-on-more-than-one-list-set-on-the-page/2658/1 "2024-03-20T12:58:05Z")

</div>

I have a collection called Articles, and I’m displaying them on a single page grouped by a category (manually).

I have a new collection called Videos, and I want to combine them into each group list.

Topic A (list-1)  
Articles+Videos

Topic B (list-2)  
Articles+Videos

Topic C (list-3)  
Articles+Videos

I got the first one going well, but when I tried to set up the second, it broke the combine across the board.

There doesn’t seem to be a specific example of list-1, list-2 for combined, so I want to verify this can be done before I go chasing my tail.

Thanks!

---

<div class="post-metadata">

**Author:** ![ryann.mccorkell](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/ryann.mccorkell/32/915_2.png) [@ryann.mccorkell](https://forum.finsweet.com/u/ryann.mccorkell)\
**Post date:** [March 20, 2024, 2:13pm UTC](https://forum.finsweet.com/t/can-i-use-combine-on-more-than-one-list-set-on-the-page/2658/2 "2024-03-20T14:13:49Z")

</div>

I had applied sorting to the first set I did, but it looked like the code for that was causing a problem, so I removed it and then was able to combine different lists by incrementing their list numbers.

Combine + Sort + Slider is the end goal.  
Right now, Combine + Slider is working.

I’ll try to apply the sort again at the end.

---

<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:** [March 20, 2024, 3:13pm UTC](https://forum.finsweet.com/t/can-i-use-combine-on-more-than-one-list-set-on-the-page/2658/3 "2024-03-20T15:13:50Z")

</div>

Hey @ryann.mccorkell! CMS Combine will work for several lists, all lists with `fs-cmscombine-element=list` will be combined into one lists, all lists with `fs-cmscombine-element=list-2` will get combined into a second list and so on.

Adding each list to a slider will require some extra setup as you need to combine the lists before the elements are added to a slider. Let me know when the combine is ready and I’ll help you setup the sliders which follow the same structure for multiple instances 🙂

---

<div class="post-metadata">

**Author:** ![ryann.mccorkell](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/ryann.mccorkell/32/915_2.png) [@ryann.mccorkell](https://forum.finsweet.com/u/ryann.mccorkell)\
**Post date:** [March 20, 2024, 4:02pm UTC](https://forum.finsweet.com/t/can-i-use-combine-on-more-than-one-list-set-on-the-page/2658/4 "2024-03-20T16:02:43Z")

</div>

Thanks @Support-Luis

I got the sliders going with the following code:

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

<!-- [Attributes by Finsweet] CMS Sort -->
<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmssort@1/cmssort.js"></script>

<!-- [Attributes by Finsweet] CMS Slider -->
<script defer fs-attributes-preventload="true" src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsslider@1/cmsslider.js"></script>

<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
  'cmscombine',
  (combineInstances) => {
      window.fsAttributes.cmsslider.init();
  },
]);
</script>

<script>
window.onload=function(){
document.querySelector(".fs_cmssort_button").click();
};
</script>

```

I deferred the slider load until the combine is complete. I have tried to apply the fs\_cmssort\_button trick to sort all the combined lists, but it doesn’t seem to have any impact.

The two are collections combined one after the other; I’d like to sort them alphabetically so the videos are interspersed with the articles (totally random would be even better, but I don’t think we can do random with the sort script that I could see).

I’ve assigned the fs-cmssort-element to each collection pair  
fs-cmssort-element = list-1

And tried calling it on load.

I feel like it may need to be further deferred to allow the sort before the slider. I am sure there is a more concise way to do that.

---

<div class="post-metadata">

**Author:** ![ryann.mccorkell](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/ryann.mccorkell/32/915_2.png) [@ryann.mccorkell](https://forum.finsweet.com/u/ryann.mccorkell)\
**Post date:** [March 20, 2024, 6:16pm UTC](https://forum.finsweet.com/t/can-i-use-combine-on-more-than-one-list-set-on-the-page/2658/5 "2024-03-20T18:16:02Z")

</div>

@Support-Luis I think I’m close but need some help getting over the finish line.

From looking at the sort page, I noticed that I needed a trigger button for each combined list.

[button]  
fs-cmssort-element = trigger  
fs-cmssort-field = title

[slider]  
fs-cmsslider-element = slider

[collection 1]  
fs-cmsslider-element = list  
fs-cmscombine-element = list  
fs-cmssort-element = list

[collection 2]  
fs-cmscombine-element = list

* * *

[button]  
fs-cmssort-element = trigger-2  
fs-cmssort-field= title

[slider]  
fs-cmsslider-element = slider-2

[collection 3]  
fs-cmsslider-element = list-2  
fs-cmscombine-element = list-2  
fs-cmssort-element = list-2

[collection 4]  
fs-cmscombine-element = list-2

* * *

etc.

Current code:

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

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

<!-- [Attributes by Finsweet] CMS Slider -->
<script defer fs-attributes-preventload="true" src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsslider@1/cmsslider.js"></script>

<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
  'cmscombine',
  (combineInstances) => {
      window.fsAttributes.cmsslider.init();
  },
]);
</script>

<script>
window.onload=function(){
document.querySelector(".fs_cmssort_button").click();
};
</script>

```

I tried the troubleshooting query, and it returned this error:

**Attribute fs-cmssort-field=“title” in list was not found. Add fs-cmssort-field=“title” in the children list on the page.**

But I have flagged all the titles in all collections with fs-cmssort-field=“title” attribute but nada.

---

<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:** [March 21, 2024, 10:45am UTC](https://forum.finsweet.com/t/can-i-use-combine-on-more-than-one-list-set-on-the-page/2658/6 "2024-03-21T10:45:03Z")

</div>

Hey @ryann.mccorkell! You are almost there, could you share a link with me? I’ll go inn and check the details of everything

---

<div class="post-metadata">

**Author:** ![ryann.mccorkell](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/ryann.mccorkell/32/915_2.png) [@ryann.mccorkell](https://forum.finsweet.com/u/ryann.mccorkell)\
**Post date:** [March 21, 2024, 1:05pm UTC](https://forum.finsweet.com/t/can-i-use-combine-on-more-than-one-list-set-on-the-page/2658/7 "2024-03-21T13:05:23Z")

</div>

@Support-Luis Thanks!

[https://preview.webflow.com/preview/mbc-marketplace-me?utm\_medium=preview\_link&utm\_source=designer&utm\_content=mbc-marketplace-me&preview=d1d9c1ef6ab881f0433080f31e5f9689&pageId=644bf917fc9e33689980b660&workflow=preview](https://preview.webflow.com/preview/mbc-marketplace-me?utm_medium=preview_link&utm_source=designer&utm_content=mbc-marketplace-me&preview=d1d9c1ef6ab881f0433080f31e5f9689&pageId=644bf917fc9e33689980b660&workflow=preview)

I think the code provided for fs\_cmssort\_button probably hits the first one and then stops (and wasn’t apparent as the first group doesn’t have anything in it’s combined collection currently).

I was going to try something like this on the onload but everything kind of went bonkers before I gave up for the night.

document.querySelectorAll(‘.fs\_cmssort\_button’).forEach(button =\> button.click());

---

<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:** [March 22, 2024, 11:42am UTC](https://forum.finsweet.com/t/can-i-use-combine-on-more-than-one-list-set-on-the-page/2658/8 "2024-03-22T11:42:09Z")

</div>

Hey @ryann.mccorkell! I see what you mean, here is the best I could come up with, I don’t like using a timeout but no matter what I did if CMS Slider is initialized right after the lists are sorted, all but the first item of the first slider are hidden…

```js
<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmscombine',
    (combineInstances) => {
      // Use the counter to select the specific fs_cmssort_button
      const sortButtons = document.querySelectorAll('.fs_cmssort_button');

      // Iterate through each button and click them
      sortButtons.forEach((button) => {
        button.click();
      });
      setTimeout(() => {
        window.fsAttributes.cmsslider.init();
      }, 500);
    },
  ]);
</script>

```

Can you test it and let me know how it works on your end? Please try without the timeout as well