Tab menu with inline non-tab text

Hey all, I’m experimenting with Webflow and would like to achieve something to this effect.

Referring to the image below, I would like a natural looking (header) text “We help you with design, development, identity, strategy and consulting.” The underlined text would work like tab menus, clicking them would toggle content in the tab content section. The slewed text with the yellow background would be the hover, and the active/current tab.

What I would like to achieve would be have the entire text block be like a header, and only the underlined texts be the tab menu links. Being able to control the hover and active states of the tabs would be wanted too.

Something like this pseudo-code describes what I’d like:
<h1>We help you with <tab1>design</tab1>, <tab2>development</tab2>, <tab3>identity</tab3>, <tab4>strategy</tab4> and <tab5>consulting</tab5>.</h1>

My current work-around is:
“We help you with” is a header object

Everything vertically below this is a tab menu with the individual tabs

  • "design, "
  • "development, "
  • "identity, "
  • "strategy and "
  • “consulting.”

Within each tab menu, in order to only underline the words and not things like “and” and the commas, I have 2 header blocks within the tab item (e.g. “design” and ", "), and style the first block accordingly.


Here is my site Read-Only: Preview

Any idea on how I can achieve this?

:sleepy: hoping to get help.

Note: I’ve already seen the javascript solution for making non-tab elements control tabs.

Ugh no luck yet :frowning:

:thinking: hmmm no ideas