How to add custom style to children of odd or even collection items?

Hey guys,
I’m building a project overview page with teasers based on a collection list from CMS. There is this wonderful feature to structure list items by odd items (1st, 3rd, 5th etc.) or event items (2nd, 4th, 6th etc.). This allows me to mirror the teaser content and switch the image and the text structure on every 2nd collection item.

But how can I structure children of these list items?

I found no solution in Webflow designer and it seams like :nth child is not supported either.
Would highly appreciate if anybody knows how to solve this problem.

here is my project:
https://preview.webflow.com/preview/jan-grosse-architektur?utm_medium=preview_link&utm_source=dashboard&utm_content=jan-grosse-architektur&preview=2c01e4d3b0e1b2f6f6ce0b3e799f8cca&mode=preview

PS.: I want to mirror the image slider indicator and the arrow buttons. Both is still work in progress.

hi @Max_Bach it can be done with simple JS loop.

your navigation container is flex so to reverse its structure you have to only add custom CSS class

.reverse{
flex-direction: row-reverse;
}

and add this custom code

const projectNodes = document.querySelectorAll(".w-dyn-item");
const projectArray = Array.from(projectNodes);

projectArray.map((project, i) => {
  if ((i + 1) % 2 === 0) {
    const oddSliderNav = project.querySelector(".slider_menue");
    oddSliderNav.classList.add("reverse");
  }
});

it should work
happy no-coding

1 Like

Hey @Stan thanks for your help. I’ve implemented it and its reversing the slider_menue but there is no more “even structure”. So its reversing it for all the collection items. Could you check if I might did something wrong?

… added the class to my slider-menue:

… put HTML Embed Code into the sider-menue:

… and I added custom code into the before body tag of my page:

Here is the result:

Its doing it but unfortunately not on every 2nd collection item :frowning:

hi @Max_Bach do NOT add reverse in Webflow classes, ONLY in custom CSS, otherwise class will be applied to ALL elements. Sorry I didn’t mentioned it as I didn’t thing that is necessary, code I have provide add class reverse dynamically.

I have also noticed that you didn’t add DOMContentLoaded and JS code is wrapped in wrong tag correct tag for scripts is <script> </script> and no <style>, tag <style> is for CSS.
here is exact JS code


<script>
document.addEventListener("DOMContentLoaded", () => {
  const projectNodes = document.querySelectorAll(".w-dyn-item");
  const projectArray = Array.from(projectNodes);

  projectArray.map((project, i) => {
    if ((i + 1) % 2 === 0) {
      const oddSliderNav = project.querySelector(".slider_menue");
      oddSliderNav.classList.add("reverse");
    }
  });
});
</script>

Let me know if you have been able to implement it :wink:

1 Like

waaaah nice it works!! thank you so much :slight_smile:
as you can see I’m totally lost on coding :DD

so I only need to get my custom slider finished yet. but this is another story :wink:

glad to help, if this solved your request, feel free to check any response as solution to close this request as solved

Have a good day

1 Like

yap I did. have a good one too :wink:

1 Like

Hi @Max_Bach I have renamed your request more accurately to be easier find solution for other forum members

1 Like

Hi @Stan, thank you for your help on this topic.
Yesterday I followed your guide to achieve the same thing on a website I’m working on and it worked perfectly.

Today, I don’t know why, the code snippet doesn’t seem to work anymore… I don’t know what has changed.

Could you take a look at my code and please tell me what I’m doing wrong?

My goal is to rotate in a different way the “.image-card-wrapper” elements and align on the left the “.heading-c3” elements on even collection items.

Read-only designer link: Webflow - Cantine Bonelli

Thank you


hi @joshua_dantonio with second loop you are re-assigning value of variable oddSliderNav in memory. You can simplify this process to use only one loop to catch both elements and assign them custom class. Something like this.


<script>
    document.addEventListener("DOMContentLoaded", () => {
        const projectNodes = document.querySelectorAll(".w-dyn-item");
        const projectArray = Array.from(projectNodes);
    
        projectArray.map((project, i) => {
            if ((i + 1) % 2 === 0) {
                const oddImage = project.querySelector(".image-card-wrapper");
                const oddHeading = project.querySelector(".heading-c3");
                oddImage.classList.add("reverse");
                oddHeading.classList.add("reverse");
            }
        });
    });
</script>

Hi @Stan thank you for your answer.
I tried to implement your code but there’s still something I’m missing.
In the console I get this error:

Uncaught TypeError: Cannot read properties of null (reading 'classList')
    at (indice):42:26
    at Array.map (<anonymous>)
    at HTMLDocument.<anonymous> ((index):38:22)

It’s the same error I had before.

Could you help me with that?
Thank you a lot!

Schermata 2022-03-07 alle 16.48.57
Schermata 2022-03-07 alle 16.49.10

Im not on my comp right now but I can look on it later when will be back later today or tomorrow.

EDIT: delete whole code you have copied as I will inject it to your site my self and don’t have any conflict with already assigned variables.

hi @joshua_dantonio I had now time to look on your project closer and your issue is related to your navigation. Reason is that your navigation have also generated elements .w-dyn-item but they do contain ONLY anchor <a>, that’s why you get an error as you are trying to grab element that doesn’t exist in this path.

CleanShot 2022-03-07 at 19.35.59

You can solve it by pointing to .card-wrapper instead to grab only contents elements.
This code should work

const projects = Array.from(document.querySelectorAll(".card-wrapper"));

projects.map((project, i) => {
    if ((i + 1) % 2 === 0) {
        const oddImage = project.querySelector(".image-card-wrapper");
        const oddHeading = project.querySelector(".heading-c3");
        oddImage.classList.add("reverse");
        oddHeading.classList.add("reverse");
    }
});

Hi @Stan. Now that you pointed it out, I understand the error. Thank you a lot for your help, now it works!

Have a nice day :slight_smile:

1 Like

@Stan, thanks so much for this, it works great. One question – how would I use the code you provided with multiple Collections on the same page? I only want to target the items in blocks_collection-list, and the code works when it’s the only Collection on the page, but as soon as I add two more collections above the code breaks. Thank you!

https://preview.webflow.com/preview/eagle-ranch?utm_medium=preview_link&utm_source=designer&utm_content=eagle-ranch&preview=7b19fd36cb2d4c0d4c3043a046882c0d&pageId=64d3bfdca6890d21334a2838&workflow=preview

hi @das0011 are you talking about this code on Approach page?

    document.addEventListener("DOMContentLoaded", () => {
        const projectNodes = document.querySelectorAll(".w-dyn-item");
        const projectArray = Array.from(projectNodes);
    
        projectArray.map((project, i) => {
            if ((i + 1) % 2 === 0) {
                const oddImage = project.querySelector(".block_component-new");
                const oddHeading = project.querySelector(".block_component-new-switch");
                oddImage.classList.add("hide");
                oddHeading.classList.remove("hide");
            }
        });
    });

As this was a long time ago I do not remember the exact purpose but what I see in the code it seems to be for one collection. If there is more collection you need to grab all blocks_collection-list and loop over each one.

The issue may be only when you will have in one collection an odd number of items.