Linking to Specific Tab from another Link or Button

@cyberdave @brryant
Can’t you guys at Webflow make this “small great feature”?
It seems its not a lot of work for you guys, but for a lot of us…
its to difficult to code i am totaly not a code man…
The time that i could make this… would properly be the same time as one of your team member makes this!

3 Likes

OK, i have to give it a try… because i see no other option!
my questions:
Do i place this in the custom code “overall” or in the customcode in te page, or targeting page?

Other question,
What do i have to change in this code?
my tabnames are “tab-kantoor”, “tab-flexplek” and “tab-vergadering”
my targetingpage is: /flexwerkplek

Hope that enyone can help, much appreciated

My site:
Website link
Klik ok RESERVEER for the TABS…

My site in the designer:
https://preview.webflow.com/preview/pandraak?preview=[object Object]

Hello @Koen,

You don’t have to change anything in this code snippet, just paste it into the custom code area Before </body> tag. Dont forget to wrap it with <script></script> tags.

Next step is set correct links to your tabs. For that you will need to add CLASS NAMES to the tab-links. It can be combo classes. I usually give the specific class names, which “sound” the same as tabnames. So “tab-kantoor”, “tab-flexplek” and “tab-vergadering” should become also combo classes for TAB-LINKS.

Then links to particular tab will look like this: /page_name?tab=tab_class
In your case it would be: /flexwerkplek?tab=tab-kantoor

Hope it helps,
Anna

5 Likes

Many Many thanks Sabanna!! it works!!!

1 Like

7 posts were split to a new topic: Linking to Nested Tabs

Hi.

I try to make my home page link blocks to link right tabs in my portfolio page. I copied that code to before body section of my home page settings as it is. I wasn’t suppose to change anything in it? Then I wrote in ‘videos’ link block url: http://samutyrvainen.com/portfolio?tab=videos and in ‘graphic design’ link block url: http://samutyrvainen.com/portfolio?tab=graphicdesign. Those ‘videos’ and ‘graphic design’ are names of the classes of the tabs in portfolio page. But when I published and clicked links they go to portfolio page but always to the default tab. I wonder what I’m doing wrong…?

https://preview.webflow.com/preview/samutyrvainencom?preview=22348feb08c23c96bc5a8a424bb5d4b8

http://www.samutyrvainen.com

– Samu

Hello, @samutyrvainen

Let me help you.

That videos and graphicdesign it should be classes of TAB LINKS, not tabs itself.

Hope it helps.

Cheers,
Anna

Hi!

So now I named the class of the tab button (same which you click on the page to choose the tab) as pf-tab-link-graphicdesign, and wrote url: http://samutyrvainen.com/portfolio?tab=pf-tab-link-graphicdesign in the corresponding link block at the home page, but it still goes just to the portfolio page, not to the right tab. Hmmm…

– Samu

Oh, I had inserted the script in my home page instead of the portfolio page. Now my links work beautifully. Thanks Anna.

– Samu

1 Like

I’ve been playing around with this for a few days but can’t seem to get it to work. Hopefully someone can help me spot what the issues is.

I’ve tried adding the code listed above to the page where the button is and also the code section of site settings.

Example page:
Page with button: http://azuzit.webflow.io/category/business-tech
The button is the “All categories” button next to the breadcrumb

This should link to the “tab-categories” class tab but doesn’t and I’m not sure why.
The tab page is located at http://azuzit.webflow.io/articles

Hello! I was trying to implement this feature to build multilanguage CMS website.

I have two separate static pages (projects/работы) and they contain links that lead to a dynamic template page where I created a tab panel with 2 tabs(one of them contain info in english another tab - another language).
Is there a possibility to use this code, cause I cant use the name of the Dynamic Page as link?

here’s preview link https://preview.webflow.com/preview/kitchen-place-ca-test-2?preview=ca225b97ad00ea5e7e0db2836c87459d

THANKS A LOT!!!

↑↑↑ Can anybody help me with this? ↑↑↑

Hi, @vlart!

You can accomplish that by using dynamic embeds.

  1. add embed widget inside dynamic item and insert this snippet:
    <a class="your-class" href="/kitchens/"SLUG"?tab=class-of-tab-link">Open page</a>

“SLUG” is a dynamic field “Slug”
“class-of-tab-link” - class of the tab-link which shows English or Russian collections

  1. Add the script that Dan showed at the comment#6 in this topic :point_up: to the site custom code, before </body> tag

Feel free to ask more if you need more help.

Best regards,
Anna

2 Likes

Thank You so mush @sabanna! It’s just awesome!
Love Dynamic Embeds )))

1 Like

This article resolved the issue for me: Link to an anchor & a tab - #2 by Eka

This is so awesome! Thank you thank you!