Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Add styling to a webflow CMS Collection list item based on the value of a field in the CMS collection.
$(function () {
* What it does:
* Style or Manipulate CMS Items returned from a collection list
* that includes info to use as the logic for each item.
* Assumptions
* You created a cms optionfield in your cms collection
* and have a textelement in your layout that is
* bound to the cms optionfield from your collection.
* In this case I have div.w-dyn-item (webflow native div item for cms collection lists)
* with a wrapper and first child.>div.dclass
* Adjust your targets as necessary to match your layout.
* Author: @webdev ("Jeff S") - webflow forum member
$("div.dclass").each(function(index, element) {
var myclass = $(this).text(); // .dclass value (the cms option selected)
var mytarget = $(this).parent(); // .post-wrapper
switch (myclass) {
// When the value I added to some cms items is "colorful"
case "colorful":
// add an inline style to .post-wrapper
mytarget.css("background", "#eaeaea");
case "fadein":
mytarget.css("background", "#ccc").fadeIn();
case "featured":
// add a css class to .post-wrapper
// where .featured or .post-wrapper.featured class exists
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.