Linking to Specific Tab from another Link or Button

Hello,

is it possible to use regular button to change tabs. So when I click on a button, I want my tab section to change the active tab.

Thanks

3 Likes

Hi @jhotujec, the only way to do this currently is by inserting some custom code.

Here is an example, which you can copy into your </body> code section.

<script>
  $('.custom-button').on('click', function (evt) {
    $('.target-tab-link').triggerHandler('click');
    evt.preventDefault();
  });
</script>

Then in the webflow designer, you would need to assign these special classes (without the leading dot) to the respective elements:

Custom button: custom-button
Target tab link: target-tab-link

Hope that helps!

14 Likes

Hi Danro,

Can you go into detail a bit about the above subject? Specifically, I know how to copy the script to the </ body> code section. My difficulty is how to assign the classes and to which elements. I have a button on my homepage and three tabs on a different page. I want the button to select and activate the middle tab with the content as well. I’ll appreciate any help on this. Thanks!

1 Like

@kamilnabong You can assign classes directly in the webflow designer, illustrated below:

The “Tab Link” should receive the target-tab-link class
And your Button should receive the custom-button class

3 Likes

Thanks for this danro.

Am having trouble implementing this. My scenario requires linking to a specific tab from another page. I would think this code snippet assumes the tab and custom button are on the same page.

Any help here? Thanks a lot.

@Busayo_Kupoluyi

Selecting the tab on another page would require a custom URL parameter. Here’s an example script that you can append to the </body> code section:

<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>

Once in place, you would then need to link to your page with a custom url:

/contact?tab=target-tab-link for a ‘contact’ page
/?tab=target-tab-link for the home page

Note: This will only work once the page is published or exported. (not in preview mode)

Hope that helps!

17 Likes

@danro

You guys are just too awesome!!! Works like a charm… Thanks a bunch.

1 Like

Have a way to do it without coding?

Tks guys!!!

Hi @felps85, not at the moment, but if you need some help implementing this code to your site, then I am sure one of us on the forum can help you :smile:

It is a good suggestion though, to have this integrated to the designer, so we will see what we can do in upcoming feature updates.

Cheers !

5 Likes

Hey guys, I’m trying to do this right now, but I can’t figure out what part of the tab to name in order for the link to know where to go. I’ve tried giving an ID to the pane and the button, and then naming the tabs in the settings panel, but I’m still getting a 404. What am I doing wrong? The links I need to work are in the header and the footer.

www.intradiem.webflow.com/our-work

Hi @tomjohn, could you share your read only public link, you can get that from site settings. Then copy that link and paste that here to the forum, then we can look how you have that setup.

Cheers, Dave

Sorry about that, I gave you the wrong one.

https://webflow.com/design/intradiem?preview=bf4cf5a49154d71b604a7d8350b37d50

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!