How to make dynamic CMS tabs and tab content with dynamic CMS blog content?

Hi! Dear Webflow team,

Printscreen:

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:

  1. The content will be dynamically changed.
  2. The tab link allowed to be updated or deleted by CMS.
  3. 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.

Here’s the shared link: Webflow - Miaoli Caffeine Trail

Best regards,
Lila Y.

Hi Lila,

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.