Back to all blogs

Create link to specific tab in Webflow (with slide)

By Mislav Repinac
January 22, 2025

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.

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.

Need help with Webflow?

I’m always ready to work on your next big thing, let’s talk!

Book a free call

Related posts

5 min read

How to play background video on hover in Webflow

Learn how to play video on hover in Webflow using simple Javascript code. No embed video, this works with native background video element in Webflow.

Read more
4 min read

How to create a text span within Webflow CMS

Learn how to create a custom text span element within dynamic Webflow CMS. Style the text span however you want, without any code.

Read more
7 min read

How to create a Webflow CMS filter system

Read this tutorial on how to leverage Finsweet CMS Filter attribute to successfully create a Webflow CMS filter for your next client project.

Read more
Trusted by 50+ businesses like yours

Your search for Webflow developer ends here

To ensure highest quality of my service, I only work with limited amount of clients every month!

Book a free call