Creating url slugs for tabs on the same page?

I'm answering a question here started in another thread. Please see the question below.

The first thing to do is to point your footer URLs to the support page. Adding a URL hash for each tab. Also I suggest turning off opening links in a new window.

Add the following to your code block.

<script>

  $( ( ) => {
  
    // change tab when URL hash changes
    
    $( location.hash ).click ( );
    
    $( window ).on ( 'hashchange', function ( ) {
    
      $( location.hash ).click ( );
      
      } );
      
    } );
    
  </script>

This script does two things. First when the page is loaded it attempts to click a tab. The second it looks for URL hash changes and also clicks a tab. The later is for within page hash changes. If you add non tab related ids to the page then the script would probably need to be adjusted to only click on tab related elements.

One thing you might want to consider. Change the id attributes for the tab buttons to something more descriptive. Instead of tab-1, tab-2, etc. Use something like returns-policy, warranty, shipping, and terms-conditions. That way the URLs will be a bit more informative.

Let us know how it goes.

@creedon this works perfectly, thank you for taking the time to explain!

Is there a way to then to further link a section within a tab? 

On 2/8/2021 at 10:52 AM, creedon said:

 

Add the following to your code block.

<script>

  $( ( ) => {
  
    // change tab when URL hash changes
    
    $( location.hash ).click ( );
    
    $( window ).on ( 'hashchange', function ( ) {
    
      $( location.hash ).click ( );
      
      } );
      
    } );
    
  </script>

This script does two things. First when the page is loaded it attempts to click a tab. The second it looks for URL hash changes and also clicks a tab. The later is for within page hash changes. If you add non tab related ids to the page then the script would probably need to be adjusted to only click on tab related elements.

One thing you might want to consider. Change the id attributes for the tab buttons to something more descriptive. Instead of tab-1, tab-2, etc. Use something like returns-policy, warranty, shipping, and terms-conditions. That way the URLs will be a bit more informative.

Let us know how it goes.

Hey @creedon is there a way to apply this code so the customised slugs are used when clicking on the actual tabs? It works perfectly for navigation links but when I click on the tab blocks themselves, the slugs revert back to #section:nth-child(2) etc.

https://beehyve.squarespace.com/adhd-support-2

Thanks so much! 😊

@melaniejaane I don't understand what you are doing.

It appears you are trying to mix CSS syntax with URI fragment behaviour. URI fragments are meant to work with the id attribute of an HTML tag and have no concept of CSS selectors.

Perhaps if you describe the behaviour of the effect you are trying to achieve to us, we can provide some advice.