Open Specific Tabs from other Pages

</ head>

</ body>

<!-- OPEN SPECIFIC TABS -->
<script>
// get the webflow array or define a new one if none exists
var Webflow = Webflow || [];
// push the click tabs handler function into the webflow array
Webflow.push(function () {
  // get the respective tab name using the getParam function and store it in a tabName variable
  var tabName = getParam('tab');
  // terminate the function if no tab name was found
  if (!tabName) return;

  // click on the tab
  $('.' + tabName).triggerHandler('click');

  // define the getParam function
  function getParam(name) {
    // replace any '[' in the tab name with '\['
    // & also replace any ']' in the tab name with '\]'
    // this escapes the symbols '[' & ']' so they can be used in regex
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    // define a regex to search for the tab name
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
      // search for the tab name in the query string part of the page's url
      results = regex.exec(location.search);
    // return the tab name OR "" if no tab name found
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
  }
});
</script>

HTML/Embed

// this is the url format for each button link that when clicked navigates to the tabs page
/page-name?tab=tab-name-here
Author
N/A
Published
Nov 13, 2020

How to use:

Tutorial Coming Soon!

Check Browser Support

Interactive Table

Comments

Unfortunately at this time we don't have SSO for comments so you will have to sign up separately to leave your comment. Thanks for understanding!

Link to and open a specific tab from any other page on your website with Webflow's native tabs element.

Clone Project
Documentation
Author:
Built by
Built with
For the best experience

Please switch to desktop to view the content.

Back Home
Thank you! Your submission has been received!
Close Form
Oops! Something went wrong while submitting the form.
Become a Contributor