I’m working on a project that involves showcasing a company’s photography talent roster using the CMS in a Tab format on Webflow. I’ve run into a bit of a challenge and would really appreciate any guidance or suggestions you might have.
The Setup:
We have a page displaying our signed talent roter names using CMS in a tab layout (using Finsweet solution)
When hovering over a talent’s name, their bio + video are displayed – this part is working great (using Activate tab on hover instead of click solution)
However, I’m stuck at the point where I need to make the talent’s name not just a hover but also a clickable link that leads to their individual CMS page.
Is there a way to turn these tabs into clickable links?
Or is there a simpler/better way to display the talent’s bio+video on hover, without involving Tabs etc?
If anyone has tackled a similar issue or knows how to work around this limitation in Webflow, your insights would be invaluable!!
I think that you can use some custom code to keep your current setup but allow users to reach post pages upon clicking on the talent name.
If you add a data-slug attribute to fs-tabs_dynamic-tab-link and connect it with the slug, the same data attribute should be cloned on the tab link element. Then, you can follow the comments in the code to use data-slug to redirect users on mouse click.
If, for some reason, the attribute is not cloned to a tabs link, I have used the talent name and converted it to a slug. At the moment, that option has been used and it seems to work. However, this solution is good only as long as you don’t change the slug to be different than the name or until you don’t add the same name twice in the CMS. So, I would suggest going with the first solution.
setTimeout has been added because it will take some time for the Finsweet script to update HTML. If this doesn’t work for you, you can try using Finsweet push
window.addEventListener('load', function(){
setTimeout(function(){
let tabLink = document.querySelectorAll('.fs-tabs_link')
tabLink.forEach(link =>{
// in case you would like to go with heading solution
let slug = link.querySelector('h5').textContent
let cleanedSlug = slug.replace(/[^-\w\s]/g, '').replace(/\s+/g, ' ').trim();
let finalSlug = cleanedSlug.replace(/\s+/g, '-').toLowerCase();
//////////////////
// in case you add data slug attribute to fs-tabs_dynamic-tab-link
// var dataSlug = link.querySelector('.fs-tabs_dynamic-tab-link').getAttribute('data-slug')
//////////
link.addEventListener('mousedown', function(e){
window.location.href = '/talent/' + finalSlug // use dataSlug instead of finalSlug if you go with attribute solution
})
})
},500)
})
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmstabs',
(listInstances) => {
////Copy code without window load and set timeout function here
},
]);