Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Allow hash links to open tabs in Oxygen (read comments for instructions)
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);
}
@wplit
Copy link
Author

wplit commented Feb 1, 2019

(This is adapted code that I saw by Dominik Fretz, I just made it more Oxygen-user-friendly so it can be easily copied and pasted into the chosen tab without having to edit the JS)

Instructions

  1. Go to the tab you wish to be able to link directly to. (not the tabbed content, the tab itself.)
  2. Once you're on that element. Go to Advanced > Javascript
  3. Copy the code above and paste it in.
  4. Click apply code.

Now when you link to that tab's ID (not the tabbed content's ID, the tab's ID) it will open up that tab and scroll down to the content.

@wplit
Copy link
Author

wplit commented Feb 1, 2019

link_to_tabs

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.

@yankiara
Copy link

yankiara commented Oct 28, 2019

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 ;-)

@1962up
Copy link

1962up commented Apr 29, 2021

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

@crisclaessensgithub
Copy link

crisclaessensgithub commented May 19, 2021

Hi,

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

@dariobros
Copy link

dariobros commented Feb 13, 2022

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!

@joffreypersia
Copy link

joffreypersia commented May 19, 2022

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

@Fma965
Copy link

Fma965 commented Jul 10, 2022

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

This works fine still

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment