I want to create anchor links that when clicked go to a specific tab. The tabs are generated via the CMS Tabs attribute.
So far I’ve been having issues because the CMS tabs aren’t loaded onto the page when the page is first rendered.
Any help? @Support-Luis
Thanks!
Hey @jaime! If you are using code to create these anchor links, try wrapping it in the CMS Tabs callback function!
Here is the basic structure
<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmstabs',
(listInstances) => {
console.log('cmstabs Successfully loaded!');
// Add your code here!
},
]);
</script>
This code will only run after the script has fully loaded on the page.
If you still face issues please share a link and I will take a look!
Hey @Support-Luis sorry I should have clarified, the tab links are in the nav and so the user would be coming from another page. So at page load, the anchor is not on the page because the CMS tabs hasn’t loaded the anchor section yet. Does that make sense? Any solution to that?
Hey @jaime!
Could you provide a quick Loom video on how this is supposed to work? Also, could you share a read-only link so I can write the necessary code?
Sorry for the late response.
Here is a quick overview of what I need help with - Video uploaded to CleanShot Cloud
And here is the read only link - Webflow - (ARCHIVE - JAIME TEST COPY) Benchmark Estimating
Appreciate the help!
Hey @Support-Luis any fix for this? thanks!
Hey @jaime!
My idea on how to fix this would be:
Instead of trying to scroll the page with the anchor links, we set an id to the div containing the CMS Tabs. We then use JS to detect which option the user selected on the nav bar and make the required tab active when we scroll the page to this section.
We can add the current id as attributes to both the links on the nav and the tab link elements on the CMS Tabs. Something like data-tab = ID should be fine. If you can make these changes I can work the code!
Hope this makes sense. If needed, I can record a quick loom or hop on a call!
Hi @Support-Luis can you take a look and let me know if I’ve done it correctly - Webflow - (ARCHIVE - JAIME TEST COPY) Benchmark Estimating
Hey @jaime!
I’ve got this code to work, however, there are some changes you’ll need to make for it to work on your end!
Add this code to the </body> section of custom code in the site settings, as this code is needed on all pages.
<script>
document.addEventListener('DOMContentLoaded', function () {
const tabAnchors = document.querySelectorAll('[data-tab]');
tabAnchors.forEach((tab) => {
tab.addEventListener('click', () => {
const anchor = tab.getAttribute('data-tab');
localStorage.setItem('tabToOpen', anchor);
});
});
const tabToOpen = localStorage.getItem('tabToOpen');
if (tabToOpen) {
const target = document.getElementById(tabToOpen);
if (target) {
setTimeout(() => {
target.click();
}, 100);
} else {
console.warn(`No tab found with ID "${tabToOpen}"`);
}
localStorage.removeItem('tabToOpen');
}
});
</script>
I removed the ID previously used as anchor links from the collection items and added a new one to the element below. It can be anything, I am just using “tabs” to demonstrate this.
Modify the nav links and change the anchor to the ID above
Move the cost, capital, and asset ID from the icp_anchor to the element with the fs-cmstabs-element="tab-link"
This should be it, but let me know if you face any issues!
I’m attaching a quick loom on this setup working
