Link to Open Tab on Another Page

Community resources Webflow Tips
1

Hey hey!

Today’s “What in Webflow” shows how to open a tab using a link:

You can learn more by viewing the read-only link which shows exactly the layout/setup of the website: Webflow - Link to Open Tab

Also, the live site can be viewed at http://link-to-open-tab.webflow.io/, and you can clone the site at Open Tab with a Link - Webflow

Don’t forget to add this custom code to your site:

<script>
var Webflow = Webflow || [];
Webflow.push(function () {
  var tabName = getParam('tab');
  if (!tabName) return;

  $('.' + tabName).triggerHandler('click');

  function getParam(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
      results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
  }
});
</script>

Feel free to reach out with any questions. I’d be happy to help!

Also, I would love to know what you would like to see presented. I’m not the sharpest crayon in the coloring box, but I love to learn :nerd_face:

10 Likes
2

:+1: Great trick @mistercreate! This is definitely something I see in help requests often.

1 Like
4

Hi @mistercreate

I have seen video i learned some new things from your tricks it will be helpful for me and thanks for sharing video.

Regards,
Daniel

1 Like
5

Oh, that’s awesome!

I’m glad I could help! :nerd_face:

6

Hey @mistercreate,

This tutorial is great! thank you!

Is there a way to link to a tab inside a tab? :sweat_smile: I have this problem now…

1 Like
7

Hi MisterCreate,

Thanks for this tutorial - exactly what I was looking for and it worked like a charm. My coding skills are very basic - js I just have to copy from places… so I was able to link to my tabs from the home page on the “webflow staging site” but once I downloaded the code and uploaded it to my clients host GoDaddy it shows a 404 and can’t make the link. Do you have any tips for me to fix the issue or could I send you the project so you could possibly take a look?

Thanks for your help,
ManaT

1 Like
8

I am so happy to have found this workaround. I am having some trouble with implementing it. At the moment, I have my button links as follows: `javascript:delay(‘/marketing’) - as I am incorporating the method from this link → https://webflow.com/blog/how-to-build-page-transitions-in-webflow

I followed all the instructions (I’m pretty sure) and can’t seem to come right. I have tried combining the two: `javascript:delay(‘/marketing?tab=tab-websites#websites-tab-section’) - but this just takes me to the top of the page where the tabs are.

Is there anyone who can assist? Please and thank you in advance!

Side note: if anyone knows of any tutorials or forums where I can find out about how to click between tabs and start at the top of the tab pane. At the moment when you click between tabs it sticks to where you are from the tab before. And I am aware that one cannot anchor with tabs.

Sorry if this is asking too much. Just been struggling for so long - would love a little win today.

THANK YOU!

9

Hi, Mistercreate, You discussed the topic very precisely, I also found information about it in other posts, but I still struggle with it:) Please have a look why it doesn’t work on my website, thank you very much and greetings :slight_smile:

https://mediarecovery.webflow.io/informatyka-sledcza?tab=operacyjna#sekcja-tabsy

10

I finally found the cause, the script interferes with another script :confused: but I don’t know why.

script type=“text/javascript” src=“https://mediarecovery.pl/wp-content/typewriter/js/jquery.min.js”>

11

Hey,

This method isn’t working for me. I have 9 tabs but no matter what I write, it only links to the 2nd Tab and redirects to the 2nd tab.

12

I’m sorry. I am an idiot. I used <style tags instead of <script tag

13

Hey I’m trying to use this technic on my site but I had to custom build tabs instead of using Webflow’s prebuilt ones. I can’t seem to get your code to work on my site. Is there a way to modify it so that it will work for me? Thanks!

https://flingers.webflow.io/newmenu

https://preview.webflow.com/preview/flingers?utm_medium=preview_link&utm_source=dashboard&utm_content=flingers&preview=a6a0e04fbc68723d02808c9c0c5fb030&mode=preview

14

Hey I’m still looking for help with this. Your code works with a standard tab. I have a custom built ones that use interactions to function. Is there a way to trigger an interaction by clicking a button on another page that takes you to a new page and activates a trigger?

15

Hi Micah,

Thanks for sharing!
I hope you’re still getting alerts for this post (3 years later).

I’m trying to link from a description (text-link) on a product page to the respective blog post page tab. It’s not working for me.

I copied the code provided here (exactly as is, no changes) to the site-wide footer custom code field.
I gave the tabs combo classes of “blog-tab-1”, “blog-tab-2” etc.
In the CMS of the respective product I added a text-link with the URL “https://ornament-is-crime.webflow.io/post?tab=blog-tab-1”

What am I doing wrong?
Is it the format of the URL that’s not working?
Can you please help?

https://preview.webflow.com/preview/ornament-is-crime?utm_medium=preview_link&utm_source=designer&utm_content=ornament-is-crime&preview=67d6cc255726c5fa9db030eebf3f2545&pageId=610c112af103959954fbc359&itemId=610c1199aa7c028c05c505a5&workflow=preview

16

I solved it by re-building the blog architecture and using collection lists instead of tabs.
I still wonder though how one could link to open posts in a situation described above…

17

Hooray it works! Much easier than I thought. There are many other support threads with people struggling to do this. If only they had seen your video first!

Some of these threads date back to 2015, 7 years ago! Just imagine all the collective dev hours that have been wasted because Webflow never built this functionality into the Designer. Webflow really needs to start building these simple things that people ask for. There’s no reason why this couldn’t have been done sometime in the past 7 years.