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.
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!
18 Likes
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 
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.
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!