How to remove class in all siblings (buttons)

Hello everyone,

I really need your help to complete months of work here! !! :slight_smile:
On my product page, I didn’t want users to leave the main page when choosing a category. So I used Mixitup.

It is working, but it is confusing for users that the buttons don’t stay pressed if they clickout.
It’s also confusing to not have the right button pressed when they get to the page of all the products with a specific URL ID. (I mean with an filtered category)

Check directly on my published website because I added some custom codes : https://yes-we-kens-final-project.webflow.io/tous-les-produits

Thank you in advance for your help !!

Have a good weekend

Martin


Here is my site Read-Only: https://preview.webflow.com/preview/yes-we-kens-final-project?utm_medium=preview_link&utm_source=designer&utm_content=yes-we-kens-final-project&preview=cdb4994bd0f64a3e1714f10601c52501&pageId=616ed11b1e2c3feff47dc838&workflow=preview

Here is the temporary URL of my website : https://yes-we-kens-final-project.webflow.io/tous-les-produits

Hey !

Need help please :)))

Trying one last time. Hope you guys could help me please

Have a good weekend

Hi @yesweken if I understand correctly you would like to have background of button be persistent (blue) when is clicked. If this is correct you need to add class to current button and remove this class on all siblings. I do not know how you have set color change on these buttons but here is code that add class active to button and remove it on siblings.

const btns = [...document.querySelectorAll(".w-button")];

btns.forEach((btn) => {
  btn.addEventListener("click", () => {
    setActive(btn);
  });
});
const setActive = (el) => {
  [...el.parentElement.children].forEach((sib) =>
    sib.classList.remove("active")
  );
  el.classList.add("active");
};

LIVE
RO

Hope that helps

Hi @yesweken do you have further question related to your topic? If not feel free to close your issue as solved