How to link to Specific Tab (Again)

  • Resolved jamiepaulsmith

    (@jamiepaulsmith)


    4 years, 6 months ago

    Hello,

    I have read through your previous post on this here but I still cannot get this to work for me.

    I have a small ‘Need Help‘ section with href text (size/dimension chart), that ideally, when clicked I want it to open my ‘View More Details’ preview section and automatically open the ‘Harness Size Guide’ tab.

    I have this as my following code:-

    HTML
    <a href="#tab-harness-size-guide">size/dimension chart</a>

    JQUERY

    jQuery(document).ready(function( $ ){
    jQuery( 'body' ).on( 'click', 'a[href^="#tab-harness-size-guide"]', function() {
	var href_pieces = jQuery( this ).attr( 'href' ).split( '#tab-harness-size-guide );
      var href        = '#tab-title-harness-size-guide' + href_pieces[1];
      jQuery( href ).children( 'a' ).click();
  });
});

    Any help on this would be really appreicated.

    Thanks in advance!

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter jamiepaulsmith

    (@jamiepaulsmith)

    ** UPDATE **

    Okay, I’ve come up with the following code which opens my ‘Show Product Details’ window as I want but it still doesn’t automatically switch to the ‘Harness Size Guide’ tab.

    However, I’ve noticed that if you pre-select the ‘Harness Size Guide’ tab, it works but it won’t switch to the ‘Harness Size Guide’ tab on click.

    jQuery(document).ready(function( $ ){
    jQuery( 'body' ).on( 'click', 'a[href^="#tab-harness-size-guide"]', function() {
    var $this = $('#hiddenBlock');
      var href = jQuery( '#tab-harness-size-guide' ).attr( 'href' );
      jQuery( href ).children( 'a' ).click();
      if ($this.data('open')) {
        $this.animate({height:'200px'}, 600);
        $this.data('open', 0);
      $('.product-details-button a').text('SHOW PRODUCT DETAILS');

    }
    else {
      $('.product-details-button a').text('SHOW LESS');
        $this.animate({height:'100%'}, 600);
        $this.data('open', 1);
    }
});
});

    Hey @jamiepaulsmith,

    It looks like you figured it out over the weekend which is awesome! You could look at the documentation for the WooCommerce tabs in the future but our plugin doesn’t handle any of the Javascript for the tabs. That’s up to the theme and each could implement it differently. I would consult with your themes docs to make sure they don’t have information that could help you do what you’re doing easier!

    Let me know if you have any questions!

    Cheers,
    Freddie

    Thread Starter jamiepaulsmith

    (@jamiepaulsmith)

    Hello,

    Thank you for your response.

    This hasn’t been figured out. My updated code doesn’t work as I’m expecting it to.

    Can you help with this?

    Hey @jamiepaulsmith,

    Could you paste the code that you have now.

    – Freddie

    Thread Starter jamiepaulsmith

    (@jamiepaulsmith)

    Hi @fmixell,

    I had already posted it. It was the ‘updated’ code I posted above.

    jQuery(document).ready(function( $ ){
    jQuery( 'body' ).on( 'click', 'a[href^="#tab-harness-size-guide"]', function() {
    var $this = $('#hiddenBlock');
      var href = jQuery( '#tab-harness-size-guide' ).attr( 'href' );
      jQuery( href ).children( 'a' ).click();
      if ($this.data('open')) {
        $this.animate({height:'200px'}, 600);
        $this.data('open', 0);
      $('.product-details-button a').text('SHOW PRODUCT DETAILS');

    }
    else {
      $('.product-details-button a').text('SHOW LESS');
        $this.animate({height:'100%'}, 600);
        $this.data('open', 1);
    }
});
});

    Anyway thanks in advance!

    @jamiepaulsmith,

    Try to change your if statement to this: if ( $this.data('open') !== 0 )

    That should allow it to toggle the correct way each time.

    Cheers,
    Freddie

    Plugin Contributor Tracy Levesque

    (@liljimmi)

    ?????? YIKES, Inc. Co-Owner

    Hello @jamiepaulsmith,

    We haven’t heard back from you in a while so I am going to close out this ticket.

    If you need more help, please reopen it and we will be happy to help you.

    Thank you!
    -Tracy

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How to link to Specific Tab (Again)’ is closed to new replies.