Allow hash links to open tabs in Oxygen (read comments for instructions)

tab-element.js

var hash = window.location.hash.substr(1);
   
if (hash == '%%ELEMENT_ID%%') {
  setTimeout(function(){
    
  jQuery([document.documentElement, document.body]).animate({
  scrollTop: jQuery('#' + '%%ELEMENT_ID%%').offset().top - 100
  }, 1000);
    
  jQuery('#' + '%%ELEMENT_ID%%').trigger('click');
  },1000);
}

Note the ID of the tab in the screenshot that is selected is #_tab-105-9. This is the hash you would link to

<a href="https://examplesite.com/page/#_tab-105-9">Go to tab</a>

The tab element will be clicked when the page is loaded and the tab content is revealed.

Hi, thx so much for this!

I thought about some little improvment...

Instead of having to use #_tab-XXX-X hash, I wanted to use some custom hash I could easily set for each tab.

So here is my solution:

• for each tab you want to link, set class "tab-hash-XXXXX" where XXXXX is the custom hash you want to use ;
• put the following JS code in global tabs div only custom JS only, NOT EACH TAB:

var hash = window.location.hash.substr(1);
if (hash !== '') {
  setTimeout(function(){
  	jQuery('.tab-hash-' + hash).trigger('click');
  },1000);
}

So for example if you set class "tab-hash-mytab" to any tab, loading MY_URL/#mytab will directly open Tabs to right tab ;-)

Great! Thank you very much! It even works with the toggle function of Oxygen! :)

Hi,

What would be the code for the Toggle function in Oxygen?

this piece of code actually fixed my problem with anchor links not aligning properly when clicked from a different page... i added the code to every ID onto which hash is pointing (just removed -100 so it stops at the top px)
thanks for it!

Hi, thx so much for this!

I thought about some little improvment...

Instead of having to use #_tab-XXX-X hash, I wanted to use some custom hash I could easily set for each tab.

So here is my solution:

* for each tab you want to link, set class "tab-hash-XXXXX" where XXXXX is the custom hash you want to use ;

* put the following JS code in global tabs div only custom JS only, NOT EACH TAB:

var hash = window.location.hash.substr(1);
if (hash !== '') {
  setTimeout(function(){
  	jQuery('.tab-hash-' + hash).trigger('click');
  },1000);
}

So for example if you set class "tab-hash-mytab" to any tab, loading MY_URL/#mytab will directly open Tabs to right tab ;-)

It doesn't work for me. Is it still working on Oxy 3.9 / 4.0 ?
Thank you

var hash = window.location.hash.substr(1);
if (hash !== '') {
setTimeout(function(){
jQuery('.tab-hash-' + hash).trigger('click');
},1000);
}

This works fine still