Creating links to specific tabs generated by CMS tabs attribute

Attributes
1

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!

2

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!

3

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?

4

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?

5

Hi @Support-Luis

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!

6

Hey @Support-Luis any fix for this? thanks!

7

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!