Streaming live at 10am (PST)

How to SHOW 'div-block-a' IF 'div-block-b' exist on same page?


#1

How to SHOW ‘div-block-a’ IF ‘div-block-b’ does exist on same page?

Purpose

  1. I have another company’s registered trademark used with permission on my website.
  2. As per agreement, I must state in the footer “COMPANY and COMPANY BRAND are registered trademark of COMPANY, Inc.” on every page that uses registered trademark.

Desired Action

  1. Automate “COMPANY and COMPANY BRAND are registered trademark of COMPANY, Inc.” SHOW in footer IF COMPANY BRAND div block exists on same page.

Desired Implementation

  1. 2 Div Blocks:
  • div-block-a: A Registered Company Trademark Image & COMPANY BRAND content
  • div-block-b: “COMPANY and COMPANY BRAND are registered trademark of COMPANY, Inc.”
  1. Rules
  • IF ‘div-block-a’ EXISTS=TRUE on same page, then SHOW ‘div-block-b’
  • IF ‘div-block-a’ EXISTS=FALSE on same page, then HIDE ‘div-block-b’

How do I do this naively within webflow?

Help me solve this riddle and earn brownie points!
http://html-sandbox.webflow.io/auto-show-hide-div-block


#2

If the content you want to base your conditional visibility is CMS content, then the answer is use conditional visibility with the “is set” rule, that’s 3 clicks.

If your content is static (not CMS), then you can’t without writing a Javascript program.


#3

I assume you want a unique footer with all options because you want it to be a symbol and be the same on every page… is that the reason behind all that?

Now you can control what will show up in a footer symbol by adding CSS custom code within the page, anywhere else. For example, give specific and different classes to both block: .black-a .black-b . Then when you don’t want the block B to appear, for example, add in the page a custom code component with:

<style>.black-b{display:none}</style>

and it won’t show up in the footer.


#4

Yes.

Basically, footer symbol has a disclaimer section. Each disclaimer has a mini div stacking. I want the last Disclaimer notification DIV to appear when the content contains specific ‘company-brand’/ ‘company-name’ class.

I created a workaround / hack where I put nonsymbol static div absolute positioning div AFTER the footer and moved it up ~-10em to fit in teh right spot under the Disclaimer section built with the symbol.