Jump to content

Anchor Linking to Tab

Recommended Posts

  • Replies 8
  • Views 2.1k
  • Created
  • Last Reply

Top Posters In This Topic

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 

 

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
<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. 

Link to comment

 

 

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!

Edited by melaniejaane
Link to comment
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

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

Link to comment
  • 1 month later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.