Im struggling with the tabs function. I have a collection of several workshops in the CMS. The client wants the navigation of the workshops with tabs. So when a visitor clicks on one of the date tabs the field underneath will change to the context (image, text) of the selected workshop.
I know how tabs work then the content is placed in the ‘tab content’, but I have no idea how to make it work when context is collected from the CMS.
I tried typing out a response but it became too complicated. Main thing would be to give the collection item within the tab panes a filter. I made a quick example in Webflow and in the example I named all the CMS by number and then filtered each collection item within the pane to only show that number.
I’ll share my read-only link with you. Let me know if you understand, otherwise, I’ll try again to help
Another option besides what is suggested by @Nicole_Klaver and @TheCat, is to add filters to the collections showed on the tab pane. Add a collection list to the tab panel and add filters just to show the content that you want for each tab.
And repeat that for each tab pane with its respective collection list item. I hope this helps.
My tab menu also needs to be a collection list. The amount of events is not fixed. How can I make sure that each tab in the menu corresponds to the right tab pan?
I don’t think filters will work cause the date is always different in the menu tabs.
I understand that the events are not fixed. the way you change them is, you add a new collection list item that correspond to the filter, you can add a filter for the last three collection list items that way you always have the latest event showing. I think this link will help you with your cms questions Overview dynamic content | Webflow University
I think I understand how the filter works on the collection. And it allows me to add a collection list to the tab pane, but I don’t understand how the filter can work on the tabs menu, because it does not allow you to add a collection list in the tab menu.
I understand your question now. You can’t add a collection list to a tab link on the tabs menu, that sucks, I know, but It kind of makes sense for a preset tabs element. So, in my opinion you have three options, one is to use custom code and force the tabs menu to allow collection list items, another one is to build a custom tab menu with interactions, and finally, what I would do, is to just have static content for the tabs links and dynamic content for the tabs pane. The thing is if your client is going to add a collection list item that is going to update automatically on the pane, right?, then he can also update the dates on the tabs menu through the editor, meaning he would have to do the updating anyway. The editor actually works really well, you can set it up so that your client can only edit the dates on the tab menu. I hope this helps.
Hi @Pablo_Cortes! Hope you’re well.
I am currently looking to use an external API and the Webflow CMS for a similar problem to the one discussed above. I am looking to use Tabs, where both the Tab Pane and the Tab Links will both be set by dynamic CMS content that will be set through the external API. As discussed using a collection for the Tab Content is easy enough, but not possible to add a collection to the Tab Links.
Regarding your first option that you suggested to wouterjesse, how would you use custom code to achieve this? Have you had experience with this before?
I am well thank you. So using a CMS on a tab link is a little complicated. You could, in theory, do it with custom code, but even then it would have some limitations. Meaning, your costume code would depend on what API your are migrating your content from or if the API just populates your webflow CMS. My advice is to rather than going through all the code needed to make tabs work, use interactions to achieve the same goal, but without the limitations of the tabs element.
