Class based on switch status

Design help General
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 @magicmark!

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:

1 Like
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 @magicmark :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.

1 Like
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:

1 Like
8

Ok, this is a pretty smart but also a bit ‘hacky’ solution.
So how does this affect SEO. Because with this approach the page has its content doubled, although one DIV element is hidden. And as far as I know, Google doesn’t like repetition.
I really like to know.

9

Hi Krister,

I was also looking for this, and found this item in the forum:

Basically, you have access to all fields of your collection via javascript.
I created a switch to give collaborators the opportunity to create a 1 or 2 column layout for a blogpost.
The switch is called ‘Tekst in 2 kolommen’ (in english: text in 2 columns).
The main text will be rendered as 1 column by default. Setting the switch on, renders the main text in 2 columns.
And this is what I added in the ‘Before /body tag’ field to the corresponding template page (click the cogwheel on your template page to get acces to this field).
The collection field you need can be selected by positioning the cursor where you want it (in my case after the ‘(’ where the ‘if’ statement starts) clicking on the ‘+ Add Field’ (top right), where you can choose from all the fields you defined and some general conditions. The choosen field turns into a blue bar with rounded corners. See the previous link with the screenshot.

<script>
var myElement = document.getElementById("main_text");
  if (Tekst in 2 kolommen) {
    myElement.classList.add("_2-col");
  } else {
    myElement.classList.add("_1-col");
  }
</script>

The classes ‘_2-col’ and ‘_1-col’ are classes I created in Webflow. Check the exact classnames in developer mode of your browser, mine where named as ‘2-col’ and ‘1-col’ but WebFlow added the underscore, don’t know why…
Now, when I think of it, I don’t need to set the ‘_1-col’ class, because the div with id ‘main_text’ by default renders the text/content in one column.

I hope this helps.

1 Like