Streaming live at 10am (PST)

Coming soon switch


#1

Hi,

So is there currently any way to toggle a class based on if a switch is on or off. For example, I have the following

and when the switch is on in the record I want it to drop the opacity of the element but that means having a class toggle so is there a way to add a class to switched records?


#2

No, but you can duplicate the element, edit its opacity, and use Conditional Visibility to display one or the other depending on the switch state.

When I use this technique, I make the element a symbol, I wrap it inside of a div, and duplicate this div instead. So if I edit the content of the element later, i don’t have to do it twice.


#3

Hm. I can’t see to create a symbol?

What am I doing wrong?


#4

Ah sorry, this tip isn’t for when you’re using the technique inside of a Collection List. It works in a Template page though.


#5

but you can create symbole outside and copy past in the collection div


#6

I’ve created a symbol outside and tried to move it to the collection, copy and paste it etc, it doesn’t allow it.

Here’s a gif:
https://gyazo.com/d2b93ea7dd157542d537b94da5789434


#7

Okay, but I don’t understand why you need a symbol there ? when you design your cards, they are directly cloning for your CMS content.


#8

I’m just going off what Vincent said, I don’t believe I should need a symbol just going off the response.

The “cards” are using the CMS and the content from the table, example the image

All I’m trying to do here is to simply drop the opacity on coming soon items. At a pure code level. this wouldn’t be an issue, however, this project is in webflow.


#9

Hey @benbagley

It’s always helpful for the community to assist if you can share your read-only project link.

Without being able to look at your site structure, here is my suggestion.
Inside of the Collection Item, duplicate your card element. You will now see double or two cards inside each item. Add a combo class of coming-soon to one of the cards. On the combo class card coming-soon adjust the opacity or any of the other css in the styles panel. Now add conditional filtering to show/hide the appropriate card based on the switch.

card

  • condition: visible when “coming soon” switch is off

card coming-soon

  • condition: visible when “coming soon” switch is on
  • style: adjusted opacity

This method should work as long as you’re not using the cms item container as the card itself. If you need further instruction, it would be great to get a link to the project. Also below is a link to using conditions if you need it. Hope this helps.