Jump to content

Open TAB and scroll to content ID


jarvis
 Share

Recommended Posts

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

Link to comment
Share on other sites

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?!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.