Open TAB and scroll to content ID

[jarvis]

Morning All,

I've a link on a page, which when clicked needs to open a specific TAB. The code for this works and can be seen below:

jQuery(document).ready(function($){
	$('a.jump-to-tab').click(function(e){
		e.preventDefault();
		var tabhash = $(this).attr("href");
		//var tabli = 'li.' + tabhash.substring(1);
		var tabli = tabhash.substring(1);
		var tabpanel = '.panel' + tabhash;
		$(".wc-tabs li").each(function() {
			if ( $(this).hasClass("active") ) {
				$(this).removeClass("active");
			}
		});
		
		//$(tabli).addClass("active");
		$('[aria-controls="'+tabli+'"]').addClass("active"); 
		$(".woocommerce-tabs .panel").css("display","none");
		$(tabpanel).css("display","block");
		//$('html,body').animate({scrollTop:$(tabpanel).offset().top}, 750);

		
		if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {           
			document.getElementById("tab-reviews").scrollIntoView();
		}else{
			$('html,body').animate({scrollTop:$(tabpanel).offset().top}, 750);
		}		
		
		
	});
});

Ideally, what I'd like to do, is once the TAB is open, to open at a specific point i.e. where a piece of content has a specific ID, in this case #commentform

I've looked around but can't seem to see anything and wonder if this is possible?

Many thanks in advanced

[requinix]

...Have you tried putting #commentform in the URL?

[jarvis]

Thanks @requinix

 

The href in the A tag already has href="#tab-reviews"

This is to then jump down to the TAB section whereby the code above kicks in and opens the specific TAB. So I can't quite see how to combine the two and go the TAB section, open the specific TAB and then scroll to the section within the TAB

Or am I missing something?!

[requinix]

There's no way to craft a magical link that will do the sorts of things you're describing - without adding some code on the target page.

The cleanest option is to cause the page to be rendered with the desired tab in view right from the start, which would allow you to use the # anchor immediately. But it requires changing something on the server so that it outputs the proper HTML and such so that the correct tab is shown by default.

If that's not an option then you have to come up with a scheme for fragments where the target page can inspect it on load and decipher (a) that it needs to load a particular tab and (b) scrolls to the target. But it can be less complicated than it sounds: if you use #commentform as the fragment then Javascript can extract that from the URL, find the element, determine which tab it belongs to based on its ancestor elements, switch to that tab, and then do the scroll action to the element.

The first option would be easier to explain if we knew the PHP (?) code on the server that renders the page; essentially you do something like /path/to/page?tab=reviews#commentform in your link, grab the "reviews" in code, and output (I assume) the correct CSS classes to set that particular tab as the default active tab. The browser would handle the scrolling.
The second option would be easier to explain if we knew the markup of the tabs and comment form.

[jarvis]

Many thanks for your time! I'll have a play and see what I can do - thank you for the pointers...