We're open for enquiries

Open Tabs on Button Click (Same Page)

Published on July 8, 2021
Luke Allen

The tabs included with Oxygen work nice, but I needed something a little bit more. That desire was to have a clickable element anywhere on the page and take the user to a specific tab and have it open if it's not already.

I did some browsing already and found some decent stuff on Oxygen's Facebook page, but nothing that I needed specifically. I'm going to use some code that I found from Hakira Shymuy but edit it slightly so that it does what I need it to do.

By the way, I am in no way an expert in JavaScript and this code could probably be much more streamlined, but this is what I used to achieve my desired effect.

Prerequisites

First, you will of course need to add some tabs to your page as well as some elements which you wish to correspond to the tabs. In my case, I have added two buttons "Add to Diary" and "Add a Milestone" which will correspond with the "Diary" and "Milestone" tabs, respectively. When clicking on "Add a Milestone" button, I want the second tab to open and also scroll there.

Next, you will want to take a note of the following things:

  1. The tab Element ID you wish to disable
  2. The tab's Content ID of which you wish to hide
  3. The tab Element ID you wish to enable
  4. The tab's Content ID you wish to show
  5. Your tab's "Active" class

Please see below for my examples in pink:

The Code

Next, place a code block on your page and add the following code to the JavaScript:

//run a function and set the attributes on the Oxygen element
//make another function which removes the active tab and hides its content, then add the active tab
//and reveal content for the desired tab:

function diaryButton() {

  // remove "tabMilestones" active tab class and add oxygen hidden class to that content
  var tabMilestones = document.getElementById("_tab-647-534");
  tabMilestones.classList.remove("tabs-1874-tab-active");

  var visiblecontent = document.getElementById("_tab_content-673-534");
  visiblecontent.classList.add("oxy-tabs-contents-content-hidden");
  
  // add oxygen active tab class and remove oxygen hidden class to that content
  var tabDiary = document.getElementById("_tab-641-534");
  tabDiary.classList.add("tabs-1874-tab-active");
  
  var hiddencontent = document.getElementById("_tab_content-651-534");
  hiddencontent.classList.remove("oxy-tabs-contents-content-hidden");
  
}

Be sure to replace the ID elements and the active class with your own. You can also rename your variables from "tabMilestones" and "tabDiary" to match your own preferences.

Since I have two buttons, I will need to make another function for my other button (Add a Milestone button). I will copy the same code but this time, create a new function name and switch around the IDs:

function milestonesButton() {
 
  var diarytab = document.getElementById("_tab-641-534");
  diarytab.classList.remove("tabs-1874-tab-active");

  var visiblecontent = document.getElementById("_tab_content-651-534");
  visiblecontent.classList.add("oxy-tabs-contents-content-hidden");
  
  var milestonestab = document.getElementById("_tab-647-534");
  milestonestab.classList.add("tabs-1874-tab-active");
  
  var hiddencontent = document.getElementById("_tab_content-673-534");
  hiddencontent.classList.remove("oxy-tabs-contents-content-hidden");
  
}

Now we are ready to add the functions to our buttons.

Apply Attributes to your Elements

Using the functions we just created above, we have to give the elements some attributes so that they can execute the JavaScript when they're clicked. To do this, click on the element and access the Attributes in the Advanced tab:

Then, in the "name" field, type "onclick" and in the "value" field, add the name of your function. In my case, "diaryButton()":

Then do the same thing for your other elements.

Scrolling to the Tab

Next, make sure that you have enabled Smooth Scroll to Hash Links in your page settings. To do this, navigate to Manage > Settings > Page Settings > Scripts and make sure to check the option:

Next, back on the elements where we added the attributes, you have to make them a link if they're not already. Then, in the hyperlink, you attach your target tab's ID like the following:

Do the same for the other elements and replace the ID with the tab you wish to scroll to, and that should be it. Now your elements should control the opening and closing of tabs as well as scroll to them.

Copyright © 2021 - ulprus.com - Luke Allen
cross