Create multiple divs from one collection field in webflow cms

Hi, I can’t figure a solution to this so I’m grateful if you can help.
How can I populate multiple divs from one collection field in cms with the condition that I don’t have to create another Collection nor other fields.?

Here is an explanation:
-I want to have these services (Service 1, Service 2, Service 3,…etc)

-…to fill in theses white BG tags one after the other.

PS: The Header and the Summary are part of the same CMS: Blog articles.
PS 2: This is a Collection List

Thanks a lot!

Hi @hassan Usually when i create the tags in CMS, I create a collection with tags, that is populated by (service 1, service 2) a simple collection just with these. Then in my main collection I create a multireference field that connects to the previously created tags collection. Now when I’m adding a new item in my main collection, i just pick the tags from the multireference field I’ve created.

The web structure is gonna be a collection list that will be connected to your main collection, and within this collection, you’ll add another collection, that will connect to the multi-reference field of tags. Within this collection, you’ll create the white tags, just paste in the existing one you created, connect the text within it to the name field of the tag.

2 collections you need

within the tags collection

item in the main collection - selected tags from the tags collection

html structure, first collection is connected to main, the second to tags multi-reference field. Make sure you connect the text block to the name of the tag from the tags collection.

@kenakkda has given you the correct approach, but of course there are situations like ref field limits that can restrict your ability to do this.

For what you’ve specific, you need to use custom code. I’d probably take this approach;

  • Create a DIV wrapper for your tags
  • Add a custom attribute, tag-content and data-bind it to your CMS CSV text field
  • Inside it, create your tag, and style it

Write your JS, it will need to;

  • Search for all DIV’s with a tag-content attribute
  • Get the attribute value, and CSV parse it
  • Get the DIV’s innerHTML, and treat that as a template
  • Empty the container DIV
  • Loop through your CSV values, and for each, add a copy of your template HTML with the value added ( probably as innerText )

You can get much fancier with templatting if you need to but this is a nice simple approach.

Also look at libs like AlpineJS if you do this type of thing a lot.

1 Like