Streaming live at 10am (PST)

Conditional visibility based on element display value

Read only link:

This is on my ‘Team members template’ collection page.

I have a button that I’ve created from a div block.
image

on page load the button text says ‘click me!’ - class: Txt btn ClickMe
On hover the text will change to either:

  1. ‘For facts’
  2. ‘For sudo facts’

I’m using 3 text elements for this text (classes:)
Txt btn Facts (text is: ‘For’)
Txt btn Span (text is: ‘sudo’)
Txt btn Facts (text is: ‘facts’)

When the button is clicked I have a 2 div blocks displaying a users bio info (one fake one real).
When the div: Div Flex Center > subclass .TeamFun is hidden (via an interaction) that button when hovered should read ‘For sudo facts’

When the div: Div Flex Center > subclass .TeamReal is hidden (via an interaction) that button when hovered should read ‘For facts’

So in my research I can see that conditional visibility in webflow is restricted to collections so I set out to create code to accomplish this.

this is what I have that isn’t working.
Just realized I need this to happen when hovered which this code doesn’t even begin to address.
(I’m sure its obvious at this point but… I’m pretty new at this)

if .div-flex-center .teamfun display: none{ $('.txt-btn-span') display: block; } else{ $('.txt-btn-span') display: none; }

I was getting close to getting working code… then I had an easier (for me) idea…
Since the button swapped display properties on 2 div flex boxes with my content; I just added my button to each div block which aloud me to have a second text box with my hover text that I changed display properties on for hover in.
Since my div boxes have identical formats I set my button to absolute top right.
you can’t even tell the button is switched out.