Streaming live at 10am (PST)

Link buttons to corresponding tabs on different page

I’d like to link 3 buttons on the home page to their corresponding tab on the neighborhoods page. This functionality is a common ask, with thorough documentation around linking to one tab, but very little regarding linking to multiple tabs.

My code currently successfully navigates the user from any of the 3 buttons on the home page to the other page’s default tab. I need the buttons to navigate to their corresponding tab. I’m unfamiliar with javascript so I’m not sure what to change in the custom code:

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

Share link: https://preview.webflow.com/preview/metro-digs?utm_medium=preview_link&utm_source=designer&utm_content=metro-digs&preview=466b65296bd5e24a8ec23bd22dd9cfca&mode=preview

I want the “Explore Durham Neighborhoods” button on the home page (under the Durham tab) to go to the Durham tab on the Neighborhoods page, and ditto with the Explore Cary button to Cary tab.


Thanks to anyone who can help, this community is awesome :blush:

Hello @bfaulkner,

So to do what you want you don’t have to change anything on the custom code all you have to do is to change the url of your links to the corresponding tab class. So for example on your “View All Durham Neighborhoods” link you have to add the url as follows:
/neighborhoods?tab=Durham#section id
you have to add a section id to the section where you have the tabs element. For the “View All Raleigh Neighborhoods” link the url would be /neighborhoods?tab=Raleigh#section id. For Cary it would be the same but with the Cary’s tab class name. I hope this helps. Let me know if you have any questions.

Hey @Pablo_Cortes thanks for responding! If you look at my share link you’ll see that I do indeed have the appropriate url’s attached to the buttons. (example below, but all three are properly linked)


This is why I’m confused as to why it’s not properly linking - everything is named and linked correctly. If you notice something misnamed, definitely let me know!

Hello @bfaulkner,

you need to use the section where your tabs are in. You need to give section neighborhoodtop an id and use that id on the url, right after the #. Since all your tabs are in the same section all you need to add to your url is that section id. Please let me know if it works when you add the section id.

Hey @Pablo_Cortes, thanks for the suggestion.
I had individual id’s for each of the tabs, but I switched them to a general id for the neighborhoodtop section (tabs-section). It still isn’t working unfortunately.

Hey @bfaulkner, Im sorry to hear that, could you share your updated read only link and your published link so I can try to find out what is the problem?

Read only link: https://preview.webflow.com/preview/metro-digs?utm_medium=preview_link&utm_source=designer&utm_content=metro-digs&preview=466b65296bd5e24a8ec23bd22dd9cfca&pageId=5dd366d6740f6142457ca9c9&mode=preview
Published: https://www.metrodigs.com/neighborhoods

Hello @bfaulkner,

Everything seems to be correct, I really don’t know why it isn’t working. I have use the same method before, and it worked for me. Try this, give your 80container an id and use that id instead of the section id for your urls. Please let me know how it goes.

Hey @Pablo_Cortes, It still isn’t working. I think another program I’m using might be conflicting with custom scripts on my site in general. Thanks so much for your help though! Tell Ricardo hi for me :blush:

Hey @bfaulkner, I will. I just realize it was you in the picture. Sorry I couldn’t help you fixing your issue. Good luck with your website. Take care.