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.
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:
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.
Did you manage to find a solution to this? I’m trying to achieve the same thing, showing the next modules on my collection template.
I tried the CSS solution that @memetican provided but it didn’t work for me.
If I’m on Item 4, the nested collection list should show 5, 6, 7, etc.
Any help would be appreciated :)
