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.
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
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;
$(function() {
// Find and iterate through tab elements
$(".w-tabs").each(function() {
// Exclude elements where the selected tab
// is already visible
if (!$(this).find(".w--current.w-condition-invisible").length)
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
});
});
Just what I need! Thank you for your help.
You made a small syntax error though - missed an extra " }); " at the end.
I am familiar with javascript on the backend, but clueless on the front end.
Any resources you would recommend?
So I did… hard working from a phone.
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.