Streaming live at 10am (PST)

Add dynamic class name on collection lists

Hi :wave:

We’re currently trying to add a class name to each item within a collection list - this name needs to come from a field within the cms.

My understanding is to add a dynamic field name to collection list items required custom JS - is this something anyone has had success with?

The intention is to vary styling across the list items - I know people have achieved this through using multiple collection lists (e.g a collection list of featured items, followed by a list of standard items) but we’d like more control than that.

Any help appreciated!

Chris


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

Here is some jQuery code that will do what you want. Read the comments in the code.

Here is a link to the code.

Thank you! Much appreciated.

For those with more interest:

Published Demo->https://dynamic-classes-on-a-collection.webflow.io/

Note: This is only implemented on the home page.

Shared - > https://preview.webflow.com/preview/dynamic-classes-on-a-collection?utm_source=dynamic-classes-on-a-collection&preview=a5222ef1fd15b0ba3cafdd827bcc02de

Thanks Webdev.

Just testing an implementation combining with MixitUp dynamic filtering, which requires the addition of combo classes to act as category tags for each item being sorted. Works a treat so far:

Project is here if you’re interested:
https://preview.webflow.com/preview/charterhouse-asia?utm_medium=preview_link&utm_source=dashboard&utm_content=charterhouse-asia&preview=4f9d6a6640ef8b4e5c6607a0e129f97e&mode=preview