I have two tabs populated by a single cms element. At a given time, one or both might be populated.
There is no issue when both are populated.
But if only one is populated, it can be either of the two tabs. I want the populated tab to be set as active everytime.
I dont find any option in webflow regarding this, so it might require custom code.
I am not sure how to approach this problem.
Hi Ojas, the easiest way is to use Webflow’s conditional visibility, and just hide your empty tabs. Then you don’t need to select them. If you do that, make both the Tab Link and Tab Pane conditional to display only if their content is set.
If you need your empty tab to show regardless, than yes script is your best approach. I’ll need to see a readonly link to your site to help you with that.
I have set conditional visibility already.
Let me try to explain the problem: Imagine first tab is not populated and second one is.
But first tab is set as active in the tabs pane.
Conditional visibility has been set for both tab links and tab contents associated with them.
On page load only the second tab link and second tab content will be visible.
The problem is that the first tab was set as active. So now the content will show as blank → you have to click on the second tab link → second tab content is shown.
I want the second tab to automatically become active if the first is not populated.
Ah that makes more sense; Yes, you need a small bit of custom code to detect that hidden-current-tab stage, and then select another one.
Drop this bit of jQuery in your before /BODY custom code area;
// Find and iterate through tab elements
// Exclude elements where the selected tab
// is already visible
return; // continue loop
$(this) // Within this tabs element
.find("[data-w-tab]") // Find all tabs
.not(".w-condition-invisible") // Excluding the invisible ones
.first() // Take the first one matched
.click(); // Click it to navigate
No, it’s the same outside of module definitions. I prefer ES6 spec for client side library work. You’ll find a ton of jQuery references too, which is a big pile of syntactical sugar. Makes coding pretty.