Streaming live at 10am (PST)

Linking to Specific Tab from another Link or Button


#1

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


Call specifical Tab by URL
Create link to Tabs
How to create a link to a specific tab?
Trigger tab open on nav click
Onclick next tab selection
Linking to a specific tab from a button link
Links to certain tabs
Smooth navigation continued / Tabs Menu + Hidden Icon?
Help with in-page-linking. After clicking on image redirect to [TAB] and activate it
Button set focus tab
Button to Link tab to the next tab
Improvements to the tabs widget
Is it possible to use interactions to open tabs
Linking and Anchoring with Tabs
Tab is not scrolling down to tabsection
Button linking to a specific Tab
Linking a button to a specific tab in a tabs menu
Why Isn't this tab linking working?
Fixed tab menu only visible on one section?
Nest tabs in a tab pane
How to hang on the button moves to the next slide?
#2

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!


Create link to Tabs
How do you click a link and activate a tab?
Make custom URL to open tab
Pick one picture from a deck by pressing button
Link to specific tab not working, jQuery 2.2.0
Custom gallery with carousel
Styles and scripts
#3

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!


#4

@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


How to toggle a tab menu with a button outside of the tab items?
#5

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.


How do I make a link to a Tab Pane on a certain page
Navigate from a button to a specific section in a tab?
#6

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


Selecting a tab from another page
Accessing tabs from address bar
Accessing tabs from address bar
#7

@danro

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


#8

Have a way to do it without coding?

Tks guys!!!!


#9

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 !


#10

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


#11

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


#12

Sorry about that, I gave you the wrong one.

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


#13

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.


#14

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


#15

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.


#16

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


#17

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?


#18

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


Want to get rid of the current state in Navbar
#20

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


#21

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!