Webflow

Here is a quick dumping ground of things I use in Webflow simply using it as a quick dumping ground for quick references. At the time of writing for my setup the tips do work - sources will be accreditied when I remember but no promises - a quick google should be able to find the original resource.

Linking to Nested tabs in tabs

So for this example below on a single page I wanted tabs going across the top and separate tabs for each category. But the sticking point came when I wanted to link directly to this part of the page.

Example URL: https://www.nerd.vision/product/use-cases?tab=sre_tab#roles

So if we break down what is in the URL

"#roles" is the div tag allowing us to select the div we want to bring the user to (the element ID).

"?tab=devops_tab" allows us to select the tab we want to show the user in in this case its either 'engineering_tab', 'sre_tab', 'devops_tab', 'support_tab" or 'operations_tab'

The script we want to use we need to put in the body of the page we want this feature to apply to.

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)

Adding the right classes, so we need to add a new class to the elements we want to select in the URL (See image). and essentially we select each element and add a new class to it naming it exactly how we want to in the URL.

Adding the element ID, this is how we choose the section that we want to link to, you simply need to go into the component and label it what you want for the URL, in this case, it is labeled 'roles' but could have been labeled anything.

Sources

Create element ID: https://university.webflow.com/lesson/section-link

Script for URL: https://discourse.webflow.com/t/linking-to-specific-tab-from-another-link-or-button/3665/5

URL structure for div and tab: https://discourse.webflow.com/t/link-to-an-anchor-a-tab/22356/3

Another possible option, auto URL: https://discourse.webflow.com/t/solution-creating-an-url-link-for-a-specific-tab/100824