Tabs menu -- Elements with conditional visibility

I’m looking for a way to have certain elements visible/invisible when tabs are active/inactive
In my example, the yellow leaves and the line under the text should disappear when the tab is inactive.
Anyone has any idea as to how to achieve that?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

You could use background image to style your active tab instead of regular image inside of it. Will require some styling adjustments but that’s the easiest way to do it.

Another way is to insert this custom code (via embed for example) before that tab element on the page

<style>
.active-tab.w--current .active-leaves {
display: block;
}

</style>

Then set display to none on the .active-leaves element. Probably may need to make leaves absolutely positioned to avoid tab content jumping. Or instead of display use opacity (opacity: 1 in that custom code and opacity:0 in the .active-leaves element settings.)

1 Like

Amazing, thank you! You saved me so much time :slight_smile:

1 Like