Tabbed content - url link to go to a specific tab

[scotbaston]

Hi,

I am hoping you can help, on the contact page I have 2 sets of contact information by location each in its own tab.

I would like to be able to link via a url to each tab. ie /contact#tab1 & /contact#tab2

How can I do this please?

this is on Pro v2.4.6

links in the secret bit below

[basanta]

Hi Scot,

Thanks for writing in!

The feature you are looking for need custom coding. Please refer to this post for a possible solution.

Linking to a specific tab on one page from a different page

Hope this helps!

[scotbaston]

Thank you for the link, although the example you give is for classic tabs

Do you know what the JS would be for the V2 tabs please?

[rad]

Hi Scot,

You can use the tab hash feature for v2 tab element.

Example, please inspect each of your tab item and go to Customize section and apply a hash trigger

With this example, every time you visit the page with #tab1 in the URL will automatically open the tab. The tab1 is just a sample, you can use any naming you prefer

The only problem with this is it’s not scrolling, so you still need to add this code to your Theme Options > JS.

jQuery (function($){
$(window).load ( function() {  

    if(window.location.hash) {
      var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
     
   
    var header_height =  115 + $('#wpadminbar').height();      
   
    var yloc = $('[data-x-toggle-hash="' + hash + '"]').offset().top - header_height;

    $('html, body').stop().animate({
        scrollTop: yloc
    }, 850);


}
    
} );

});

The 115 is the total height of your top bar and header bar(logo bar are excluded since it’s hidden upon scroll). Please check this on how to get the sizes https://stackoverflow.com/questions/10234154/how-to-find-computed-size-of-any-element-in-chrome-developer-tools.

This snippet will only work on your current setup and it may not work in the future. You’re free to enhance it but we can’t provide or cover any customization regarding this snippet. And you can contact a developer to further changes, but if you plan on changing and study it, you may as well check jQuery documentation here https://api.jquery.com/, and this great tutorial https://www.tutorialspoint.com/jquery/jquery-dom.htm, http://api.jquery.com/animate/

Thanks!

[scotbaston]

As per usual @Rad, a perfect solution… so simple but not readily known solution

Thank you

[jade]

You’re welcome, Scot.