I’m very confused about how to make the dynamic tabs and its tab content(with dynamic CMS blog content). So far, I manually implemented them.
The results that I expected while I toggled each tab:
The content will be dynamically changed.
The tab link allowed to be updated or deleted by CMS.
The right side of CMS blog categories and team members will be dynamically changed to its
relevant tab link.
By the way, I am still under the free starter version. (I don’t know if it’s part of the reason.)
Hope anyone kindly offer me solution.
Thank you so much.
There isn’t a convenient way to do this.
Webflow’s tabs element is not designed to have the tabs separated and easily positionable, which makes responsive changes difficult. It also does not have native CMS support.
The typical approach here is to build your own tabs setup using interactions and collection lists.
Two collection lists is neater for layout, but requires a bit of JS and a specific setup in order to have your tabs trigger the appropriate pane. You’d basically have a hidden button in each item in the “tab content” list, which hides all panes and shows only that one ( via sibling targeting ). Then your “tabs” collection list would need to proxy-trigger that click, and have its own interaction for styling the selected item.
A single collection avoids the JS but the layout is a bit trickier. since you have to use absolute positioning for the body.
Sorry for the late reply and thank you for your kindly help.
I done an alternative way for the tabs by creating multiple collections for each tab’s tab content since I ran out of my solutions.
How do you think about that?
I have no idea it’s a good method or not. (Feeling a bit of dummy & verbose In the future, I definitely will create more than these two tabs.)