How to link to specific tab

Hello,

With just simple HTML it’s possible to link to your tab (i.e. the page will jump down to your tab’s title) but it isn’t possible to open up your tab.

If you’d like to open up your tab when a link (on this page) is clicked, you’ll need some custom JavaScript. Would you like me to write that custom JS for you?

Let me know.

Thank you,
Kevin.

That would be very much appreciated – then I can change it for each product, after I know how you do one of them (hopefully!)

Thanks for your help.

If you are not able to help, at least jumping down to where the Description tab is, would be a great start. Thanks in advance.

This will jump to the tab. You can see how the href attribute is #tab-title- followed by the tab’s sanitized title.

<a href="#tab-title-how-to-use-games-as-kissing-games">whatever text you want...</a>

If this JS snippet is active on your page, then the tab will open up as well.

jQuery( 'body' ).on( 'click', 'a[href^="#tab-title"]', function() {
	var href = jQuery( this ).attr( 'href' );
	href.children( 'a' ).click();
});

Cheers,
Kevin.

Sorry newbie here… Where do I put the JS snippet? When I didn’t use that snippet and only had the a href, it still worked. It opened up the right tab, but it opened it up to the 3rd line down so skipped the beginning

• This reply was modified 5 years, 9 months ago by jackofallspades.
• This reply was modified 5 years, 9 months ago by jackofallspades.

If you’re not familiar with adding JS to your site, then I would suggest you use a plugin like Simple Custom CSS and JS.

I don’t see the tab automatically opening on the page unless you mean the description tab which is open by default.

I have a custom css thing on my page, so put it there. Hope that’s where it supposed to go! The same thing is happening, where it is skipping the first couple of lines when the link is clicked on.

https://jackofallspadesrentals.com/product/wedding-games/#tab-title-how-to-use-games-to-entertain-at-wedding

It’s not CSS so it shouldn’t go into a CSS section; it needs to go into a JavaScript section.

Also, I see what you mean about cutting off the paragraphs. It’s because it’s jumping to the tab title and not the tab’s content… Let me see what we can do about that…

Ok – and thank you!

Okay I got it. Change the #tab-title thing from earlier to simply #tab-. This will make it link to your tab’s content (and not the tab’s title).

Also, update the snippet to this:

jQuery( 'body' ).on( 'click', '.woocommerce-product-details__short-description a[href^="#tab-"]', function() {
	var href_pieces = jQuery( this ).attr( 'href' ).split( '#tab-' );
	var href        = '#tab-title-' + href_pieces[1];
	jQuery( href ).children( 'a' ).click();
});

I have to leave the office for the day but I will be back tomorrow to assist you if you run into any issues.

Thank you!
Kevin.

P.S. Thank you for the kind review! Sorry that I’m leaving you for the day ??

Edit: for example, instead of #tab-title-how-to-use-games-as-kissing-games, make it #tab-how-to-use-games-as-kissing-games.

• This reply was modified 5 years, 9 months ago by yikesitskevin.

Ok, appreciate that. I downloaded the plugin you recommended, and added that snippet in the jQuery section. It automatically has this at the beginning of the snippet: <script type=”text/javascript”> Am I supposed to add anything to the end of the snippet to close that?

After activating that snippet, it is not working. However, if I leave the “title” in, it WILL jump down to that tab, whether the snippet is there or not, however it does cut off a few lines like I was telling you.

Sorry, was hoping this would be a simple fix! Looking forward to hearing from you tomorrow when you are back in the office.

Hello,

All good – I’ve slightly changed the snippet to this:

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

I’ve added the plugin and the link to the short description on my test site and it’s working perfectly.

Here’s a screenshot of the Simple JS UI: https://imgur.com/a/ifzOoqc

Cheers,
Kevin.

Hello again – yes it is working now! Yeh! It is cutting out the title… not sure if I am being too picky, but is there anything I can do about that? If not, I really appreciate your help, but I am a perfectionist so thought I would ask.

And now that I have that jQuery snippet active, all I have to do is add the a href link and it will work for all pages?

Hello,

First, yes – now that you have the snippet active on your site it will work on any page.

Second, I think we can make it so it doesn’t cut off the title. However, when I went to look at it on the site I am not seeing the title cut off. Did you change something? Is it working now?

If the title is still getting cut off, can you send me a screenshot of what you’re seeing? (Use a service like imgur or tinypic to send screenshots)

Thank you,
Kevin.

You are right, today most of them are showing the title (some of them aren’t the first time, but when I click again it might work). Last night when I was playing with it, none of the titles were showing. Weird.

Looks like the problem has been resolved!

Were you logged in? Is the issue that the WordPress admin bar is sitting on top of the title?