Elements not responding to add/removeClass methods. Code is working but elements not showing regardless

Hello everyone,

I’ve got a real challenge on my hands. I am really, really battling to get this page to work, but I just cannot get it right:

Basically, I have 3 “buttons” with the following classes:

.product-view-options_grid and

Each item corresponds to a div containing different layouts:

.products-view_grid and

All that needs to happen is that when .product-view-options_slider is clicked, .products-view_slider should be checked for a .show class and if none is found, add it. Then the other two divs should be checked for an existing .show class and if present, to remove it. All of this should be wrapped in a 2.1-second delay to allow for a simple Webflow interaction to finish first.

Needless to say, the above procedure should be repeated on each “button”, but removing the .show class from the two divs that don’t correspond and adding a .show class to the corresponding div.

ChatGPT so kindly gave me some custom JQuery:

$(document).ready(function() {
  // Click event handler for all three product view options
  $('.product-view-options_slider-view, .product-view-options_grid-view, .product-view-options_list-view').on('click', function() {
    // Check if the clicked element has the class .is-active
    if (!$(this).hasClass('is-active')) {
      // Add the .is-active class to the clicked element

      // Remove .is-active class from the other two product view options
      $('.product-view-options_slider-view.is-active, .product-view-options_grid-view.is-active, .product-view-options_list-view.is-active').not(this).removeClass('is-active');
      // Delay for 2.1 seconds and hide/show the respective product views
      setTimeout(() => {
        if ($(this).hasClass('product-view-options_slider-view')) {
          $('.products-view_grid, .products-view_list').removeClass('show');
        } else if ($(this).hasClass('product-view-options_grid-view')) {
          $('.products-view_slider, .products-view_list').removeClass('show');
        } else if ($(this).hasClass('product-view-options_list-view')) {
          $('.products-view_grid, .products-view_slider').removeClass('show');
      }, 2100);

I have tried making this same thing happen without code and using Webflow’s interactions, but even though they worked PERFECTLY in the Preview, as soon as I go live (have checked Chrome Incognito and Safari to be sure it’s not a browser thing) I still get this whacky behaviour that the Slider View (first button) works (sort of), but the other two simply don’t come back from their display:none state at all.

With the custom code, I can see in the Inspector that my code is doing exactly what it’s supposed to do - adding and removing classes after a delay. The site just isn’t displaying the products-view_grid or products-view_list elements, even though the .show class has been added!

I am at a complete loss - would appreciate help on this one!

The desired effect should be:

Click the view button, a black div covers the content, and when it moves back again after a couple seconds, revealing the selected view (slider, grid or list).

Hope this all makes sense,


Here is my site Read-Only: Webflow - IQP
(how to share your site Read-Only link)

OK! Problem solved. I eventually realized - after many hours of struggling, testing and almost losing my patience - that the other views weren’t displaying because they contained duplicate Collection Lists, each with a Finsweet CMS Slider attribute… which meant that the items contained in the divs I was trying to display were being moved into the Slider (contained in the Slider view div which was of course hidden when the others were supposed to be displaying).

Yeah… you laugh… :wink: Now I am too.

Hopefully someone will find some value in this!