jarvis Posted October 20, 2021 Share Posted October 20, 2021 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 Quote Link to comment https://forums.phpfreaks.com/topic/314056-open-tab-and-scroll-to-content-id/ Share on other sites More sharing options...
requinix Posted October 20, 2021 Share Posted October 20, 2021 ...Have you tried putting #commentform in the URL? Quote Link to comment https://forums.phpfreaks.com/topic/314056-open-tab-and-scroll-to-content-id/#findComment-1591255 Share on other sites More sharing options...
jarvis Posted October 21, 2021 Author Share Posted October 21, 2021 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?! Quote Link to comment https://forums.phpfreaks.com/topic/314056-open-tab-and-scroll-to-content-id/#findComment-1591274 Share on other sites More sharing options...
requinix Posted October 21, 2021 Share Posted October 21, 2021 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. Quote Link to comment https://forums.phpfreaks.com/topic/314056-open-tab-and-scroll-to-content-id/#findComment-1591276 Share on other sites More sharing options...
jarvis Posted October 21, 2021 Author Share Posted October 21, 2021 Many thanks for your time! I'll have a play and see what I can do - thank you for the pointers... Quote Link to comment https://forums.phpfreaks.com/topic/314056-open-tab-and-scroll-to-content-id/#findComment-1591277 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.