Linking to Specific Tab from another Link or Button

Anyone have a solution to this issue based off of my site? A lot has changed in it since my original posting… The page I’m looking to direct to is the “our Work” page. It has a tab with three panes that I’d like to navigate to with the links in the header and footer.

Hi @tomjohn, sorry for the delay, I did look at your site, and you were missing the script code in the Before Body section of your Custom Code panel in Site Settings. I have added that code for you, so you do not have to do that.

You can format your links from the Home page to your Our Work page to the Tab, using the links as below for each tab. These links will work from any page on your site, to that Tab component on your Our Work page.

http://intradiem.webflow.com/our-work?tab=our-clients
http://intradiem.webflow.com/our-work?tab=case-studies
http://intradiem.webflow.com/our-work?tab=industries

And I tested, and it is working for me. Your existing links were using the example that @danro gave, but you had not changed the tab name from the example value that was given to the actual tab name.

Let us know if you have any further issue with this. Cheers ! Dave

1 Like

Thanks for the help, but I must be missing something. I tried putting in those links and they’re not working for me… Should I be giving the tabs an in-page ID or adding something to the custom code? The tabs themselves are named correctly as far as I can tell.

Got it to work. I wasn’t formatting my classes correctly. Thanks for all of the help!

1 Like

Hi cyberdave, can I use this for a dropdown? This is what I have done, I have used the dropdown widget as an accordion. But I want to create a link from another page to select-click the dropdown. So that when a user clicks the link form one page it opens the target dropdown. Is this possible?

Hi @topelovely, thanks for your question, at the moment, that is not possible…At the moment, it is only possible to link to another section or to a tab link on some other page.

Cheers, Dave

(post withdrawn by author, will be automatically deleted in 24 hours unless flagged)

Hi @StevenP,

Looks like you’ve got it set up correctly, but the URL should be all lowercase.

So instead of:
/mabra-care-saltsjobaden-primarvardsrehab?tab=CareTabDanderyd

It should be:
/mabra-care-saltsjobaden-primarvardsrehab?tab=caretabdanderyd

Hope that helps!

Does this work with nested classes? That would we nice instead of having giving each tab link a unique class…

I’m trying to implement this as well, but I’m not that great with Javascript.

You’ve used the example:
/contact?tab=target-tab-link for a ‘contact’ page

does this assume that the contact page is contact.html and target-tab-link is the class name of the tab we’re linking too?

sorry if that sounds like a dumb question!! Just trying to wrap my head around it :slight_smile:

@Karl_M yep, you got it! Give it a try and let us know if you have any problems.

Hello Everyone,

I am also trying this method where I want to link to a tab from a different page but I am having issues. I added the script to the actual page in wordpress. This is the link I am trying to use:

http://sidmedia.org/portfolio/tv-series?tab=tab-2

But, as soon as I hit enter it gets changed to:

http://sidmedia.org/portfolio/tv-series/?tab=tab-2

Any ideas on what to do now? Any help would be appreciated. Thank you.

Hi @KMN, thanks for your post. Try the links using the .html extension as thus:

http://sidmedia.org/portfolio/tv-series.html?tab=tab-2

Can you try that and see if it helps?

Cheers, Dave

Thanks @cyberdave The site is built on Wordpress not html, which is probably why things are acting so funny. I unlocked the site so it is public so you can view it again. Any other suggestions you have is appreciated. thank you.

Hi @KMN, sorry you are right, that link won’t work like that in Wordpress. Have you included the webfont.js file to your wordpress template? This custom code for changing links is dependent on the webflow.js file being included/linked to your site for the original code to work. p.s. I am not a Wordpress expert, so I can’t really comment if there is something special how Wordpress handles the links so on that part, don’t take my word for it :wink: Cheers, Dave

Hi @cyberdave, I have included those files in wordpress. Thanks so much for your help. Hopefully someone who knows can also help.

Hi guys, I seem to be having trouble trying to acheive a button linking to a tab on another page.

Here is the site: https://webflow.com/website/Citrea
Would really appreciate any help…

Thanks

I’ve used both the above scripts before, though the first doesn’t add the href to the URL and the second script reloads the page. Be great to have a way to link to a tab on the same page in the same way that we can currently link to a section – this way browser navigation would be maintained.

Could this be added to Webflow natively?

can you just add this please to webflow - the whole point of using webflow is so you dont have to mess about playing with custom code and JS.

Tabs should not have been added until they were tested fully and links are pretty basic stuff. Come on Guys - especially since this thread is a year old!!!

1 Like

Hi @macman, thanks for the post. You are absolutely right, the vision of Webflow is to produce great sites without having to code. As improvements to features are identified, we take that into the planning for future updates.

The custom code is useful now as a workaround until we have the requested behaviors updated into the tool :smile:

Cheers,
Dave

1 Like