CMS Tabs with Conditional Visibility

Design help CMS
1

Hey Guys,

I’ve created a CMS Collection called “Projects” that is going to be used to upload work for our portfolio. Inside of the Projects Template page, I’m using tabs to display the different executions by medium. Right now, I have tabs for “case study, images, and video” that are being populated with content from the CMS fields.

Not every project has the same kinds of content, so I added conditional visibility conditions to the tabs so they won’t appear if there isn’t any content to display. Everything seems to be working fine except when the active tab that I selected in the tabs setting (ex. Videos) is hidden on a page.

In the screenshots you can see that PopCorners page is exactly what I want to happen when the page loads. When going to a page like Unreal though, the “Images” tab is the only one visible, which is perfect since only images are connected with that project, but it is collapsed when the page loads. I want that to be expanded when you visit it for the first time.

Is there a way to change what the active tab is depending on its conditional visibility?

21%20PM
21%20PM3360×1880 621 KB

44%20PM
44%20PM3360×1880 434 KB

Here is my public share link: LINK
(how to access public share link)

2

Did you ever figure this out @Dan_Helvetica ? I’m trying to do exactly the same thing!

3

Me too!!

I need it to auto switch to the first tab with actual content + visibility = 1

4

In general I’d use a different approach, which is to build the collection list separately and then bind it to your tabs using FS CMS Tabs;

That should prevent your hidden-tabs problem to begin with.

But If there was a reason to, you can use custom code to identify the first visible tab, and then “click” the tab to trigger Webflow.js to select it.

I have a free toolkit here for manipulating the tabs, select first, last, next, etc.
But it’s not designed to consider conditional visibility as a mechanic, because… I’ve never done that before. Interesting idea, I’ll add it to the roadmap for SA5’s tabs and sliders enhancements.