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

This comment has been minimized.

Copy link
Owner 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

This comment has been minimized.

Copy link
Owner 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

This comment has been minimized.

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.