Skip to content

Instantly share code, notes, and snippets.

Embed
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.
<script>
$(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.post-wrapper>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");
break;
case "fadein":
mytarget.css("background", "#ccc").fadeIn();
break;
case "featured":
// add a css class to .post-wrapper
// where .featured or .post-wrapper.featured class exists
mytarget.addClass("featured");
break;
default:
break;
}
});
});
</script>
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.