How to show/hide tabs based on content within

Design help Custom code
1

Hi all,

I’m pretty bad at explaining tech/code related stuff, so I recorded this to further explain what i’m trying to achieve.

In short, I’d like to have a specific tab (Tab A) be active first IF content exists within it. IF content doesn’t exist in Tab A — then show Tab B’s contents instead.

Is there a way to achieve this? It doesn’t seem possible natively within Webflow, but I imagine there’s probably some custom code to help achieve this desired effect?

Any help? Thanks

2

Yes custom code is the way to solve this problem.

example with single elements;

<script>
var divA = document.querySelector(".a");
var divB = document.querySelector(".b");

if (divA.innerHTML.trim() === "") {
  divA.style.display = "none";
  divB.style.display = "block";
} else {
  divA.style.display = "block";
  divB.style.display = "none";
}
</script>

If you need further assistance consider booking my or another freelancers time.

1 Like
3

Thanks so much! I’ll try this now :pray: