Collection Item Links to Tabs

Design help CMS
1

Hello, Community,

So far I’m having a blast with webflow and was able to find all the answers I require in forums. However, this one is a tough nut and I hope you will be able to help.

Basically, I need links for different collection pages → specific tabs for different links.
I read that it is impossible, tried all the different ways suggested by posts from the past, nothing works.

My logic doing this is creating embed code in a collection item → add a button with sitename.com/ADD SLUG-NAME(by clicking on top, since embed code is in collection)?tab=tab-name
The links that I get after pushing look as if they should work, but in the end, they don’t open a specific tab. They do open a collection page, but always the same tab. I tried different variations with /slug-name#section, etc, but had no luck so far.

Am I atleast looking in the right direction? Is it possible to achieve what I want?

Links are in “home” page, “price & equipment”; “photos”; “specifications”; “review” and end goal is to get to “Cars” collection page and different tabs inside of it.

Thank you for attention!

Here is my public share link: LINK
(how to access public share link)

1 Like
2

Solved it myself, if anyone is interested - here is the custom code to Pre Header:

 <script>

var Webflow = Webflow || ;
Webflow.push(function () {

// adding a tab to a link, which has link set to “Current Collection”

$(‘.link-custom-class’).each(function(){
this.href += ‘?tab=tab-custom-class’;
});

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, " "));
}
});

Just change link-custom-class to your prefered ones and tab-custom class to tabs.
Make as many classes as you have tabs.

Hope this can help,
Cheers.

3 Likes