Streaming live at 10am (PST)

Class based on switch status


#1

I want to edit a class on a collection-item (and its children elements) based on a switch value, is this possible? I want to do this so I can have different styles between active and non-active elements in the collection list.

I know I can change colors and such based on values from the collection, but I don’t want this to be something the editor can change, I want it to be a consistent design state based on the state of the element.

Thanks in advance


#2

Hi @Krister

So you want it to display say… Red and bold when the switch is selected, then Purple and narrow, when the switch is turned off?

If this is correct, you can create this using the conditional visibility settings.

Duplicate the class and the children inside it.
Give conditional visibility to the first class, and say “Show when switch is on”
Give conditional visibility to the second class and say “Show when switch is off”

If you want to share your read only link, I’d be happy to show you in more details how this is done.


#3

Thanks for your reply @markos84uk!

What you are describing is partly what I’m trying to achieve, but I think it is a shame that you would have to duplicate content to achieve it. In addition, would like to the element to have a more “faded” look by adjusting the opacity of the element.

Anyway, thanks for your help, I think I’ll be using your solution as compromise of what I really want :slight_smile:


#4

It’s not much more time consuming than if you had to set hover triggers for each part of the class. You’ll only need to duplicate the classes that you want to appear different.

Could you show an example of what you’d like? There shouldn’t be any reason for compromises :grin:


#5

This just took a few minutes to do…

CloudApp

Take a look at the page and see if this helps. When duplicating to change the opacity, you only need to change the opacity of the parent conatiner.

Read only link HERE (Items template CMS page)


#6

Thanks again @markos84uk :smile:

I still feel this is a workaround, but maybe that’s just my because of my background in development. Would feel terrible to copy an element and add a class to that, instead of only adding a class when needed.


#7

With cross site copy and paste on the way… my CMD+C & V keys are going to take a real hammering! I’m all for the shortcuts, but I dare say thats the non-developer in me :joy: