Anchor Linking to Tab

I want to create direct links for each tab but I can't seem to get them to flick to the right section.

Does anyone know how I can achieve this?

Tab ID's:

1. #support-tab-team
2. #support-tab-providers
3. #support-tab-practices
4. #support-tab-services

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

Thank you 🙂 

1 hour ago, melaniejaane said:

I want to create direct links for each tab but I can't seem to get them to flick to the right section.

Does anyone know how I can achieve this?

Tab ID's:

1. #support-tab-team
2. #support-tab-providers
3. #support-tab-practices
4. #support-tab-services

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

Thank you 🙂 

See the vide 

On 10/12/2023 at 11:48 PM, Web_Solutions said:

 

See the vide 

 

Thanks for trying but unfortunately this video does not solve the issue.

I have anchor links set up on sections inside a "tab" structure. But the links won't go to / open the correct tab.

@tuanphan would you know how to achieve this? Thanks! 🙂 

Can you send the tab code in Code Block?

I'm not sure if it is possible or not, but I used to do same thing with Accordion, you can access an example here

• https://tuanphan3.squarespace.com/anchor-links-accordion2#accordion-item3
• https://tuanphan3.squarespace.com/anchor-links-accordion2#accordion-item2
• https://tuanphan3.squarespace.com/anchor-links-accordion2#accordion-item1
• pass: abc

<section class="coaching-tab-button-group">
<div class="tabs">    
  <nav class="tab-nav">
      <ul class="tabs-ul">
<li id="coaching-tab-executive"><a class="tab-btn" href="#tab1" ><span>Executive Coaching</span></a></li>                     
<li id="coaching-tab-parent"><a class="tab-btn" href="#tab2"><span>Parent Coaching</span></a></li>                       
<li id="coaching-tab-relationship"><a class="tab-btn" href="#tab3"><span>Relationship Coaching</span></a></li>
<li id="coaching-tab-nutrition"><a class="tab-btn" href="#tab4"><span>Nutrition Coaching</span></a></li>
						</ul>
					 </nav>
  </div><!-- /tabs -->
</section>


<script>
$(function () { 
    $("section:nth-child(4) section:nth-child(5) section:nth-child(6) section:nth-child(7)").hide().first().show();
    $(".tab-nav li:first").addClass("active");

    $(".tab-nav a").on('click', function (e) {
        e.preventDefault();
        $(this).closest('li').addClass("active").siblings().removeClass("active");
        $($(this).attr('href')).show().siblings('section:nth-child(4) section:nth-child(5) section:nth-child(6) section:nth-child(7)').hide();
    });

    var hash = $.trim( window.location.hash );

    if (hash) $('.tab-nav a[href$="'+hash+'"]').trigger('click');

});
  
$(function () {  

    let tab1 = 'section:nth-child(4)';
    let tab2 = 'section:nth-child(5)';
    let tab3 = 'section:nth-child(6)';
    let tab4 = 'section:nth-child(7)';
    let tab1Button = '#coaching-tab-executive';
    let tab2Button = '#coaching-tab-parent';
    let tab3Button = '#coaching-tab-relationship';
    let tab4Button = '#coaching-tab-nutrition';
   
    /*Initiate the Tabs*/
    $(tab2).add(tab3).add(tab4).addClass('tab-section-hide');
    $(tab1).addClass('tab-section-show');
    $(tab1Button).addClass('active');

    /*Add Actions to Each Button*/
    $(tab1Button).click(function(){
      $(tab1).addClass('tab-section-show').removeClass('tab-section-hide');
    	$(tab2).add(tab3).add(tab4).addClass('tab-section-hide').removeClass('tab-section-show');
      $(tab1Button).addClass('active');
      $(tab2Button).add(tab3Button).add(tab4Button).removeClass('active');
     // window.Squarespace.initializeLayoutBlocks(Y);
    });

    $(tab2Button).click(function(){
      $(tab2).addClass('tab-section-show').removeClass('tab-section-hide');
      $(tab1).add(tab3).add(tab4).addClass('tab-section-hide').removeClass('tab-section-show');
      $(tab2Button).addClass('active');
      $(tab1Button).add(tab3Button).add(tab4Button).removeClass('active');
     // window.Squarespace.initializeLayoutBlocks(Y);
    });

    $(tab3Button).click(function(){
      $(tab3).addClass('tab-section-show').removeClass('tab-section-hide');
      $(tab2).add(tab1).add(tab4).addClass('tab-section-hide').removeClass('tab-section-show');
      $(tab3Button).addClass('active');
      $(tab1Button).add(tab2Button).add(tab4Button).removeClass('active');
      //window.Squarespace.initializeLayoutBlocks(Y);
    });

     $(tab4Button).click(function(){
      $(tab4).addClass('tab-section-show').removeClass('tab-section-hide');
      $(tab2).add(tab1).add(tab3).addClass('tab-section-hide').removeClass('tab-section-show');
      $(tab4Button).addClass('active');
      $(tab1Button).add(tab2Button).add(tab3Button).removeClass('active');
     // window.Squarespace.initializeLayoutBlocks(Y);
    });
  });

</script>

@tuanphan your accordians look great! Here is the code I'm currently using for tabs + anchors on this page: https://beehyve.squarespace.com/services/coaching#tab3 
password: abc

It's working but not reliably – it will open any tab on first load, but on second load with different # the page won't move to new tab. Not sure how to fix.

Credit: Created the tabs ages ago but it was primarily based off Will Myers tutorials.
For anchor link code I trialled snippets from codepen, stackoverflow, and cssplay.co.uk. 

Screen Recording 2023-10-23 at 6.51.59 PM2.mov 

@tuanphan Attached video showing web response to 3 different actions.

You can see how it's not working consistently unless on first page load. Any ideas how to fix this?

1. Change the # in URL:
   • Page won't move at all.
   • OR moves to wrong place.
2. Click button (#) to anchor link on same page:
   • Only works for tab open on first page load.
   • Otherwise nothing happens.
3. Open anchor link in new tab via button(#):
   • Works every time (all first load).

Thanks so much!

On 10/21/2023 at 11:02 PM, tuanphan said:

Can you send the tab code in Code Block?

I'm not sure if it is possible or not, but I used to do same thing with Accordion, you can access an example here

• https://tuanphan3.squarespace.com/anchor-links-accordion2#accordion-item3
• https://tuanphan3.squarespace.com/anchor-links-accordion2#accordion-item2
• https://tuanphan3.squarespace.com/anchor-links-accordion2#accordion-item1
• pass: abc

@tuanphan How do I achieve what you did with the accordion?