Conditional visibility if A or B content is present

Design help CMS
1

Hello guys,

In my collection I created two links fields and I’m trying to make a div block conditional visible if one of both links are set. Any ideas?

Note: If I add two rules of the condition, one for each link, it doesn’t work because if one link is missing the condition doesn’t apply.

1 Like
2

Hmm, is it possible to use a switch instead and set the cond.vis on that?

Field: Does this item have an A or B link?
(Switch)

Link Field 1:
Link Field 2:

3

Well yeah that’s one option although it’s not ‘clean’ as I would prefer, that makes my client have to go in the collection and flick that switch depending if there’s a link or not and if they after want to add the link they have to remember to flick the switch again.

4

I’ve run into this challenge before. The way I solved it is to duplicate the div and and split the conditions between the two.

If you’re wanting the divs to hide if both are set, then do the conditions like this.

div-a

  • visible if link-a is set and link-b is not set

div-b

  • visible if link-b is set and link-a is not set

That way if both links are set, nothing should show. Am I understanding what you’re trying to achieve correctly?

1 Like
5

Thanks for your answer @matthewpmunger

Yes and no.

Let me explain my case with real data:

I have a CMS portfolio of app’s that have links to download them from the App Store or the Play Store and I linked a button for each one of the stores. The idea is that if my Item collection has a link to the App Store then show the button for App Store and the same thing for the Play Store. Until this point everything is simple…

The thing is that I have a div containing those buttons that stand out in the design because its height, colour and shadow and if it doesn’t have any buttons inside (the buttons I mentioned before) it’l be a really bad looking ‘thing’ hehe.

6

3 Mods in one thread - pressure’s on to work our magic here!

2 Likes
7

Hi @aaronocampo,

Any chance to have a look at a read only?

Cheers

8

@aaronocampo How about this? Duplicate the container-div with both links inside and conditions as follows.

container-div-1 is conditionally visible if button-a is set

  • button-a is always visible
  • button-b is conditionally visible if button-b is set

container-div-2 is conditionally visible if button-b is set and link-a is not set

  • button-a remove this button
  • button-b is always visible

container-div-1 will cover your needs if you have (A only) or (A and B)
container-div-2 will cover your needs if you have (B only)
Neither will activate if neither A or B are set so you shouldn’t ever have an empty container.

6 Likes
9

Wow! @matthewpmunger

That really works!!! Thank you very much! :+1:

10

Super Mega @matthewpmunger

2 Likes
11

Thanks @Maximosaurus, got it sorted with @matthewpmunger. Sorry I didn’t be able to share the link I couldn’t do it anyway until the project is live due to confidential issues.

Thanks anyway!

1 Like
12

@aaronocampo Glad to help! I have to admit that I really enjoy playing with CMS references and conditional visibility. Really looking forward to taking advantage of conditions for references!

@StuM All the credit goes to my 6 :coffee: a day :crazy_face:

2 Likes
13

I thought about that option, but I found it a little bit messier. Thanks to you and your 6 :coffee: !! :rofl:

1 Like
14

Hi! Is it possible to use conditional visibilty inside of a multistep form within webflow? Essentially it will be a 4 step form (Using a slider element) With radio buttons for choices. step 2’s choices are based on step 1’s choice, meaning depending on your step 1 selection the step2 choices will differ.
Would love some help!
THANKS!¡