How to add tabs to a page

How do I setup tabs for pricing tables and more?

Tabulation within Unstack is a new feature, soon it will be native, however, for right now this document will walk you through the customizations required to set this up.

Setting up page tabs

Global Setup

(1) Add this Javascript as a Custom Integration on your Integrations page

Placement: Header

<script>
window.deactivate = function(sect) {
if (sect.classList.contains('active')) {
sect.classList.remove('active');
}
sect.className += ' inactive';
};
window.activate = function(sect) {
if (sect.classList.contains('inactive')) {
sect.classList.remove('inactive');
}
sect.className += ' active';
};
// Tab click function
window.onTabClick = function(tab) {
var tabId = tab.getAttribute('href');
for (var i in window.tabs) {
window.tabs[i].className = 'tab';
}
tab.className += ' active-tab';
for (var group in window.tabGroups) {
var display = group == tabId ? 'block' : 'none';
for (var i in window.tabGroups[group]) {
var sect = document.querySelector('section[data-id="' + window.tabGroups[group][i] + '"]');
if (sect) {
sect.style.display = display;
window.deactivate(sect)
window.setTimeout(window.activate.bind(window, sect), i * 200);
}
}
}
}

window.tabs = [];

// Set up link listeners
window.initTabs = function(section_id) {
var firstTab = null;
var links = document.querySelectorAll('section[data-id="' + section_id + '"] a');
for (var i in links) {
// ignore non-links or link not in tabGroups
var href = links[i] && links[i].getAttribute ? links[i].getAttribute('href') : null;
if (!href || !window.tabGroups[href]) {
continue;
}
window.tabs.push(links[i]);
links[i].className = 'tab';
links[i].addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
window.onTabClick(e.target);
}, false);
}
// Initialize on first tab
window.tabs.length && window.onTabClick(window.tabs[0]);
};
</script>

(2) Adjust and add this style code to the same Custom Integration you setup above

<style>
a.tab:hover {
color: #14213d !important;
}
a.tab {
padding: 10px;
color: #647fb4 !important;
text-transform: capitalize;

}
a.active-tab {
background-color: rgba(220,228,244,.6);
color: #14213d !important;
/* text-transform: uppercase; */
border-radius: 20px;
text-transform: capitalize;
padding: 5px 10px;
font-weight: 500;
/* font-size: 1rem; */
cursor: pointer;
color: #647fb4;
letter-spacing: .05rem;
-webkit-transition: all .14159s;
}
.inactive {
opacity: 0;
}
.active {
animation: fadeIn ease 0.5s;
-webkit-animation: fadeIn ease 0.5s;
-moz-animation: fadeIn ease 0.5s;
-o-animation: fadeIn ease 0.5s;
-ms-animation: fadeIn ease 0.5s;
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
</style>

But, you might be wondering, what the heck are these CSS classes controlling? Well, let's break that down:

CLASS NAME DESCRIPTION
a.tab This is the style for the Hyperlink that would be used to switch to the hyperlinked tab, the styling of this is completely up to designer's choice.
a.tab:hover This is the style for when the Hyperlink that would be used to switch to the hyperlinked tab is hovered.
a.active-tab This is the style for the Hyperlinked text that hyperlinks to a tab when that tab is currently active on the screen and showing.
.active This is the class for the currently active tab, the main focus here because the animation to switch to this tab so the viewer experience is not jarring.

 

Page-by-page Setup

(1) Build out the components you'd like to be view for each "Tab" then fill out the component IDs in this script which should be added in a custom code component at the bottom of the page

<script>
window.tabGroups = {

"#tab1": [
"COMPONENT SECTION DATA-ID FOR TAB 1"
],
"#tab2": [
"COMPONENT SECTION DATA-ID FOR TAB 2"
],
};
window.initTabs("COMPONENT SECTION DATA-ID FOR SWITCHER");
</script>

The switcher component is where the hyperlinks will exist, so in this case, that component would have two hyperlinks, one for #tab1 and another for #tab2, and once clicked it would switch to that tab.

To find a DATA-ID open up the inspector tool and look for that component's section[data-id]:

Marketing CMS pricing  Unstack Inc. 2020-11-19 at 10.03.32 AM