▼
Streaming live at 10am (PST)

Custom coded visibility rules for collection item

Design help Custom code
#1

I have a collection list from which I display only one item at a time, and switch between items using a button. I am currently using interactions and duplicate elements such that when a button is clicked the corresponding elements for that item are set to display:block, and the elements from the previous item are set to display:none.

So, for two items in the collections, I have one set of elements with conditional visibility set to name=x and another duplicate set of elements with conditional visibility set to name=y.

It would be better if I could instead use some custom code that executes when the button is clicked that changes the conditional visibility of the elements from name=x to name=y. Thanks for any help you all can provide!

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

#2

@SavvyJack

Are you looking to manipulate classes, such as toggle a class when the button is clicked on the front end?

#3

Thanks for hopping in to help! No, I’m looking to change this conditional visibility value from x to y.

image
image456×532 10.2 KB
That way a different collection item is displayed on the page when the button is clicked.

#4

Mike I am not following. Maybe if I had a read-only? Conditional visibility just adds a class to an element that sets the display to none, when the condition is not satisfied. That only affects the display of those items when published. You can duplicate an element in your design and set that to display using a different condition.

#5

Okay, ya I may not properly understand whats happening under the hood. My understanding is that the collection conditional visibility makes it so that only collection items with the name “x” will be shown. So you’re saying that what’s going on is that all other items in the collection with names ≠"x" will be assigned a new class with display:none?
Here is my read only link. One of the relevant pages would be “Pocket Pick” under the “Mustache” folder. You’ll see the “buttons” labeled “light ipe” and “dark ipe.” These currently trigger interactions that change the images and some other elements. I instead would like to have these images pulled from a collection, and the collection item shown switched when the buttons are clicked.

https://preview.webflow.com/preview/savvyjack-foxycart?utm_medium=preview_link&utm_source=dashboard&utm_content=savvyjack-foxycart&preview=da3850288b6735395f4180e5d6d71a07&mode=preview

#8

This post was flagged by the community and is temporarily hidden.

#11

Right. The actual class placed on the element is w-condition-invisible with the CSS set to display:none.

As for implementation that would require some custom code.

#12

Hmm okay. So, if I have a CMS collection with 10 items (each with an image), but set the conditional visibility to display only item #1, the browser is still going to send 10 image requests (one for each item in the collection) when the page loads? If that’s the case, perhaps I don’t want to go this route after all.