Create Link to Specific Tab in Webflow (With Slide)

Guide

Last updated:

July 1, 2024

Recently I found myself needing a solution on where I can create a link that will slide to a section and open a specific tab in Webflow project. As this is not a native option (at least for now), we have to resort to some simple Javascript code that will make this possible. Lucky for us, creating this is as simple as copy-pasting a script and changing ID names. So let's get started!

Step 1: Give ID to link, tab and section.

The first thing to do is simply giving ID-s to some elements! The first ID we need to assign is to the link we want to open tab with. Keep in mind that this can be a link block, text link and button! Realistically, we could even do this with a simple div block, but then we'd have to expand our Javascript code to handle the 'sliding part'.

After that, give ID to the actual tab you want to open! Make sure you're not targeting a tab menu or tab content. You need to give ID to the tab link!

Lastly, simply give ID to the section where your tab is located. This will make sure that when we click on link, the websites slides to the section before opening a tab!

Step 2: Insert custom Javascript code and rename ID-s

This is pretty self-explanatory. All you have to do now is to simply copy-paste the following Javascript and paste it in your page settings into 'before <body> tag' code section.

<script>
document.getElementById('link id here').addEventListener('click', function(e) {
    e.preventDefault();
    document.getElementById('tab id here').click();
});
</script>

Make sure to insert corresponding ID-s into the Javascript. As you can guess, even as someone who doesn't know Javascript, this code makes it that when user clicks on element with link ID, it will automatically run a function that clicks on element with tab ID.

I used to complicated this part with unnecessary code, but this simple line works just fine!

Step 3: Connect link with section

The last step is to simply connect the same link with the section. Javascript handles the opening part, so realistically the only thing we need to do within Webflow is to make sure that when someone clicks on the link, it slides to the section.

We can do this two ways:

One way is to use Webflow's native sliding feature and simply select the section ID from the dropdown there
Second way (better one) is to type a URL yourself which will look like this: /#yoursectionid – This way is better because it makes sure that website will still slide to the section even if your tab is located on another page. This is always a good practice to use, no matter what are you working on.

Conclusion

Easy peasy! Now you can simply click on the link and it will slide to the section and open a specific tab. This is extremely useful if you have a tab with different pricing (e.g monthly, yearly, lifetime) and you want to connect those separate tabs to links in footer.