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_slider
.product-view-options_grid and
.product-view-options_list
Each item corresponds to a div containing different layouts:
.products-view_slider
.products-view_grid and
.products-view_list
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
$(this).addClass('is-active');
// 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');
$('.products-view_slider').addClass('show');
} else if ($(this).hasClass('product-view-options_grid-view')) {
$('.products-view_slider, .products-view_list').removeClass('show');
$('.products-view_grid').addClass('show');
} else if ($(this).hasClass('product-view-options_list-view')) {
$('.products-view_grid, .products-view_slider').removeClass('show');
$('.products-view_list').addClass('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,
Caleb
Here is my site Read-Only: Webflow - IQP
(how to share your site Read-Only link)
Now I am too.