Create link to specific tab in Webflow (with slide)
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.
Related posts
The Ultimate Guide to Webflow Maintenance
Discover everything you need to know about Webflow maintenance in this ultimate guide. Learn essential tips, best practices, and strategies to keep your Webflow site running smoothly and efficiently.
Top 7 Webflow Integrations for SaaS Companies
Discover the top 7 Webflow integrations for SaaS: streamline workflows, automate tasks, and enhance user engagement to boost productivity and growth.
How to Style Select Field Dropdown in Webflow
Learn how to style and customize select dropdowns in Webflow forms effortlessly. This guide covers Webflow dropdown styling, CSS tips, and form design tricks to enhance UX and create visually stunning forms for your website.
Your search for Webflow developer ends here
To ensure highest quality of my service, I only work with limited amount of clients every month!