CMS Order starting from current item?

Hi friends! I’m building sort of a checklist of things students need to in order. How do I set the CMS to display the order starting from the current item?

Lets say im on current item #1, how do i display it so it starts at 2, ect? 3…4…


Here is my public share link: [LINK]1
(how to access public share link)

Hi Alyana,

If you’re asking how to display them in numeric order, you’ll add a number field to your collection, populate it with 1, 2, 3…, and then in your collection list, you’ll sort on it ascending.

Hey @Alyana_Feliciano

To set the CMS to display the order starting from a specific item, you can use the “start from” option in the Collection List settings. Here’s how you can do it:

  1. In the Webflow Designer, select the Collection List element that you want to modify.
  2. In the right-side settings panel, go to the “Settings” tab.
  3. Look for the “Limit” option, which defines how many items to show in the Collection List.
  4. Right next to the “Limit” option, you’ll find the “Start from” option. Click on the dropdown menu and select the item number from which you want the list to start. For example, if you want the list to start at item #2, select “2” from the dropdown menu.
  5. Save your changes and preview your site to see the updated order of items in the Collection List.

Keep in mind that the “start from” option is only available in the Collection List settings, not in each individual Collection List item.

checkout some of these other threads that might also be relevant to your question: ‘Collection list - Webflow University Documentation’, ‘https://discourse.webflow.com/t/cms-display-limit-start-from-option-not-appearing’,

Hey Dagmawi!

Yeah, I wanted the start from for the each individual list item.

Like if current item was 1 then I would want the list to start at 2.

If the item was 2, I’d like to display it as 3, 4, 5, ect.

I thought it wouldn’t make sense for people to scroll all the way to the beginning if they were deep down in the list.

Is this something I would have to find code for?

Hey Memetician!

I already have them in order on the backend with a number. I was hoping that the ordering could start at the current item. This page is a CMS Item Page Template. So if this page is Item 1, i would like to make the next milestones that would appear be 2, 3, 4. But if this was Item 5 i would like the list to say 6, 7, 8. Hope this makes sense!

Ah got it, it’s the “next milestones” section you’re trying to automate.
I’m not seeing that in your designer link, it shows a “more milestones” section instead with a prev and next.

Basically you’re going to need custom code either way.

One approach is to use pure custom CSS. Let’s say you have a collection list of all of the next milestones, from #1, ordered ascending, and that you only want to show up to 3 next milestones.

On the collection list element ( not the wrapper ), you could put an ID of next-milestones.

Then put this CSS with in an HTML Embed.
Where I have {your_value}, you’d insert your actual current milestone using the + add field.
That way if you’re on item 2, it will show 3, 4, and 5.

<style>
#next-milestones > div {
    display: none;
}
#next-milestones > div:nth-child(calc({your_value} + 1)),
#next-milestones > div:nth-child(calc({your_value} + 2)),
#next-milestones > div:nth-child(calc({your_value} + 3)) {
    display: block;
}
</style> 

JS works as well and is a bit more versatile, however the CSS advantage is that if it meets your needs, it will work in the designer as well is helps with your layout work.