Is it possible to use custom code in Webflow to give each item in a collection list its own unique class, so that they can have different attributes without affecting the entire list?
TL;DR
- Assign a unique identifier to each Collection item using a Plain Text Field and link it to each item.
- Insert custom script in the Page Settings to dynamically add classes based on these identifiers.
- Use JavaScript to loop through items, retrieve identifiers, and append them as classes.
- Define and apply custom CSS styles targeting these unique classes for individual item styling.
To assign each item in a Webflow Collection List a unique class for individual styling, you'll need to use a combination of custom code and Webflow functionalities.
1. Assign a Unique Identifier
- Add a Plain Text Field to your Collection in Webflow and fill it with unique values for each item, such as an ID or custom name.
- Bind the Text Field to your Collection List item. This value will serve as a unique identifier for each item.
2. Insert Custom Code
- Go to the Page Settings where your Collection List is located.
- Scroll to the “Custom Code” section and insert a script that targets each Collection List item using the unique identifier you defined.
- The script should dynamically add classes using JavaScript based on these unique identifiers.
3. Implement JavaScript for Unique Classes
- Structure your script to loop through each Collection List item, retrieve its unique identifier, and append it as a class.
- Example: For each item in
.collection-list-item, you might add the identifier likeitem-id.
4. Use jQuery or Vanilla JavaScript
- You can use jQuery (if included in your project) or Vanilla JavaScript to accomplish this.
- Example in Vanilla JS:
```javascript
document.querySelectorAll('.collection-list-item').forEach(item => {
const uniqueId = item.querySelector('.unique-id-ele').textContent.trim();
item.classList.add(custom-${uniqueId});
});
```
5. Define Custom Styles
- Add your custom CSS styles targeting the unique classes in the custom code section or your stylesheets.
- Example:
.custom-id001 { background-color: red; }will style the unique item with idid001.
Summary
To style each Webflow Collection List item uniquely, use a Text Field as a unique identifier, dynamically append these identifiers as classes via custom JavaScript, and apply custom CSS styles targeting these classes. This method leverages Webflow’s collection settings along with some basic scripting to achieve tailored styling.