Problem linking to the first tab of nested tabs

Design help Custom code
1

Hi!

I have a set of tabs nested within another set of tabs. I want the user to always be taken to the first nested tab when clicking on any of the parent tabs.

Using the code from this post: Linking to Specific Tab from another Link or Button

I have no problem creating a link which opens the 1st parent tab as well as the 1st child tab. But when I try to create a link to open the 1st child tab from any of the parent tabs, the code just doesn’t seem to work.

I’ve checked and checked and I’m sure I have all the class names correct. But nothing seems to be working :pensive:.

Would anyone be able to help??

Here’s a demonstration I put together:

https://preview.webflow.com/preview/ailsas-test-project?utm_medium=preview_link&utm_source=designer&utm_content=ailsas-test-project&preview=48a86e830fc07e27d1d7a3af7a96bcff&pageId=60daf5a972881cab17267676&workflow=preview

1 Like
2

I think the script I just created would help with this.


<!-- 💙 MEMBERSCRIPT #31 v0.2 💙 OPEN WEBFLOW TAB w/ LINK -->
<!-- You can link to tabs like this 👉 www.yoursite.com#tab-name-lowercase -->
<!-- And sub tabs like this 👉 www.yoursite.com#tab-name/sub-tab-name -->
<script>
  var Webflow = Webflow || [];
  Webflow.push(() => {
    function changeTab(shouldScroll = false) {
      const hashSegments = window.location.hash.substring(1).split('/');
      const offset = 90; // change this to match your fixed header height if you have one
      let lastTabTarget;

      for (const segment of hashSegments) {
        const tabTarget = document.querySelector(`[data-w-tab="${segment}"]`);

        if (tabTarget) {
          tabTarget.click();
          lastTabTarget = tabTarget;
        }
      }

      if (shouldScroll && lastTabTarget) {
        window.scrollTo({
          top: $(lastTabTarget).offset().top - offset, behavior: 'smooth'
        });
      }
    }
    
    const tabs = document.querySelectorAll('[data-w-tab]');
    
    tabs.forEach(tab => {
      const dataWTabValue = tab.dataset.wTab;
      const parsedDataTab = dataWTabValue.replace(/\s+/g,"-").toLowerCase();
      tab.dataset.wTab = parsedDataTab;
      tab.addEventListener('click', () => {
        history.pushState({}, '', `#${parsedDataTab}`);
      });
    });
 
  	if (window.location.hash) {
      requestAnimationFrame(() => { changeTab(true); });
    }

    window.addEventListener('hashchange', () => { changeTab() });
  });
</script>