Solution - creating an URL link for a specific tab

Design help General
37

If anyone is still looking for a solution, this worked for me after countless retries:

<script>
  var Webflow = Webflow || [];
  Webflow.push(() => {
    function changeTab(shouldScroll = false) {
      const tabName = window.location.hash.substring(1);
      const tabTarget = document.querySelector(`[data-w-tab="${tabName}"]`);

      if (tabTarget) {

        tabTarget.click();

        if (shouldScroll) {
          const offset = 90; // change this to match your fixed header height if you have one
          window.scrollTo({
            top: $(tabTarget).offset().top - offset, behavior: 'smooth'
          });
        }
      }
    }
    
    const tabs = document.querySelectorAll('[data-w-tab]');
    
    tabs.forEach(tab => {
      const dataWTabValue = tab.dataset.wTab;
      const pargedDataTab = dataWTabValue.replace(/\s+/g,"-").toLowerCase();
      tab.dataset.wTab = pargedDataTab;
      tab.addEventListener('click', () => {
        history.pushState({}, '', `#${pargedDataTab}`);
      });
    });
 
  	if (window.location.hash) {
      requestAnimationFrame(() => { changeTab(true); });
    }

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