Easy Tabs is a 3rd party javascript library that allows site designers to place webparts in a tabbed format on a page. It is Pure Javascript. Doesn't require JQuery/ JQueryUI libraries to work. Because of layout/element changes in SharePoint 2013, the current version will not work as it is.
I debugged the code and fixed it. Now it works well in SharePoint 2013!
Well, implementation is simple.
You can change the color codes in below CSS style section to match with your site theme.
Easy Tabs code developed/licensed by Christophe Humbert. I just fixed it to work in SharePoint 2013.
-------------------------------oOOo.............................. /.\_/.\..............................oOOo..............................
<!--
File Name : EasyTabsv5_SharePoint2013.txt
Description : Code to Create Tabs of WebParts in SharePoint 2013.
Date : 4:02 PM 5/20/2015
Author : Venkatesh R
-->
<style type="text/css">
.et-tab{font-size:8pt;font-weight:bold;padding:3px 10px;background:url("/_layouts/images/selbg.png") repeat-x;display:inline-block;cursor:pointer;}
.et-activetab{background-color:#ffa83f;border:solid 1px #ffa83f;color:#351f01;}
.et-inactivetab{background-color:#bcc7f2;border:solid 1px #bcc7f2;color:#585384;}
.et-separator{height:5px;background-color:#ffa83f;}
.et-tabrow{white-space:nowrap;}
.et-offscreen{position:absolute;max-height:1px;max-width:1px;top:-9999px;}
</style>
<script type="text/javascript">
/* Easy Tabs v 5.0 * Copyright (c) 2009-2010 Christophe Humbert * http://www.pathtosharepoint.com */
/* Updated for SharePoint 2013 by Venkatesh R. */
function isEditMode()
{
var boolPageInEditMode = false;
// Check page is in Edit/Design Mode or not.
if(document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode != null)
{
var inDesignMode = document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode.value;
if (inDesignMode == "1")
{
boolPageInEditMode = true;
}
}
if(document.forms[MSOWebPartPageFormName]._wikiPageMode != null)
{
var wikiInEditMode = document.forms[MSOWebPartPageFormName]._wikiPageMode.value;
if (wikiInEditMode == "Edit")
{
boolPageInEditMode = true;
}
}
return boolPageInEditMode;
}
(function () {
var AP = "",
sec = 0,
Header = "none",
Split = "No",
Expand = " Expand All ",
Print = "";
if (isEditMode() == true) {
return;
}
var el = document.getElementsByTagName("SCRIPT"),
p = el[el.length - 1],
sT, a, sep, tabRow;
do {
p = p.parentNode;
sT = p.innerHTML.split("MSOZoneCell_WebPart");
} while (sT.length < 4 && p.parentNode.id != "DeltaPlaceHolderMain")
if (p.getAttribute("contenteditable") == "true") {
return;
}
if (p.nodeName == "DIV") {
sep = document.createElement("div");
p.insertBefore(sep, p.firstChild);
tabRow = document.createElement("div");
p.insertBefore(tabRow, p.firstChild);
} else {
sep = document.createElement("td");
var sepTR = document.createElement("tr");
sepTR.appendChild(sep);
tabRow = document.createElement("td");
var tabTR = document.createElement("tr");
tabTR.appendChild(tabRow);
if (p.nodeName == "TBODY") {
p.insertBefore(sepTR, p.firstChild);
p.insertBefore(tabTR, p.firstChild);
} else if (p.nodeName == "TR") {
p.parentNode.insertBefore(tabTR, p);
p.parentNode.insertBefore(sepTR, p);
} else {
return;
}
}
sep.className = "et-separator";
tabRow.className = "et-tabrow";
var children = p.childNodes;
p = p.parentNode;
var etRoot = [],
etHeader = [],
etTab = [],
tabsID = [];
for (var j = 0; j < children.length; j++) {
try {
var d = children[j].getElementsByTagName("div");
for (i = 0; i < d.length; i++) {
if (d[i].id.indexOf("_ChromeTitle") > 1) {
var WPid = d[i].id.replace(/_ChromeTitle/, "");
WPid = WPid.replace(/WebPart/, "");
if (d[i].innerHTML.indexOf("(Hidden)") == -1) {
var up = d[i];
while (up != children[j]) {
if (up.parentNode.innerHTML.indexOf('id=WebPart' + WPid + ' ') >= 0 || up.parentNode.innerHTML.indexOf('id="WebPart' + WPid + '" ') >= 0) {
WPid = "et" + WPid;
etHeader[WPid] = up;
etRoot[WPid] = children[j];
var spanWebPartTitle = document.createElement("span");
spanWebPartTitle.innerHTML = '<span style="text-align:justify;" class="ms-webpart-titleText">' + getText(d[i].getElementsByTagName("span")[0]) + '</span>';
etTab[WPid] = spanWebPartTitle;
etTab[WPid].id = WPid;
etTab[WPid].className = "et-tab et-inactivetab";
etTab[WPid].onclick = function () {
activateTab(this);
};
tabRow.appendChild(etTab[WPid]);
tabsID.push(WPid);
break;
}
up = up.parentNode;
}
}
}
}
} catch (e) {}
}
var Tabs = tabRow.getElementsByTagName("span"),
TabCount = Tabs.length;
if (Split == "Yes") {
var sd = document.createElement("div"),
index = Math.floor(TabCount * 0.5);
tabRow.insertBefore(sd, Tabs[index]);
}
if (AP.length && sec > 0) {
sec = sec * 1000;
interval = "";
a = document.createElement("span");
a.innerHTML = "|>";
a.className = "et-tab et-inactivetab";
a.onclick = function () {
if (interval == "") {
this.innerHTML = "||";
interval = window.setInterval(function () {
Autoplay();
}, sec)
} else {
this.innerHTML = "|>";
window.clearInterval(interval);
interval = ""
}
};
tabRow.appendChild(a);
var Autoplay = function () {
for (i = 0; i < TabCount; i++) if (Tabs[i].className == "et-tab et-activetab") {
var j = (i + 1) % TabCount;
activateTab(Tabs[j]);
break
}
};
if (AP == "Play") {
a.innerHTML = "||";
interval = window.setInterval(function () {
Autoplay();
}, sec)
};
}
if (Expand.length) {
a = document.createElement("span");
a.innerHTML = '<span style="text-align:justify;" class="ms-webpart-titleText">' + Expand + '</span>';
a.className = "et-tab et-inactivetab";
a.onclick = function () {
for (i = 0; i < tabsID.length; i++) {
etTab[tabsID[i]].className = "et-tab et-inactivetab";
etRoot[tabsID[i]].className = etRoot[tabsID[i]].className.replace(/et-offscreen/g, "");
etRoot[tabsID[i]].style.pageBreakAfter = "always";
etHeader[tabsID[i]].style.display = "";
}
};
tabRow.appendChild(a);
}
if (Print.length) {
a = document.createElement("span");
a.innerHTML = Print;
a.className = "et-tab et-inactivetab";
a.onclick = function () {
this.style.display = "none";
var f = document.getElementById("s4-workspace") || document.getElementsByTagName("body")[0],
ed = p.parentNode.insertBefore(document.createElement(p.nodeName), p);
f.appendChild(p);
for (j = 0; j < f.childNodes.length - 1; j++) {
try {
f.childNodes[j].className += " et-offscreen";
} catch (e) {}
}
a = document.createElement("span");
a.innerHTML = "Back to Page";
a.className = "et-tab et-inactivetab";
a.onclick = function () {
this.previousSibling.style.display = "inline-block";
this.parentNode.removeChild(this);
ed.parentNode.insertBefore(p, ed);
ed.parentNode.removeChild(ed);
for (j = 0; j < f.childNodes.length; j++) {
try {
f.childNodes[j].className = f.childNodes[j].className.replace(/\s*et-offscreen/g, "");
} catch (e) {}
}
};
tabRow.appendChild(a);
};
tabRow.appendChild(a);
}
function activateTab(t) {
if(t != null)
{
document.cookie = tabsID.join("_") + "=" + t.id + ";path=/";
for (i = 0; i < tabsID.length; i++) {
etHeader[tabsID[i]].style.display = Header;
if (t.id == tabsID[i]) {
etTab[tabsID[i]].className = "et-tab et-activetab";
etRoot[tabsID[i]].className = etRoot[tabsID[i]].className.replace(/\s*et-offscreen/g, "");
} else {
etTab[tabsID[i]].className = "et-tab et-inactivetab";
etRoot[tabsID[i]].className += " et-offscreen";
}
}
}
}
var m = GetCookie(tabsID.join("_")) ? GetCookie(tabsID.join("_")) : tabsID[0];
activateTab(etTab[m]);
})();
//Get InnerText or TextContent
function getText(objElement)
{
var strText = "";
if(objElement != null)
{
if(document.all)
{
strText = objElement.innerText;
}
else
{
strText = objElement.textContent;
}
}
return strText;
}
</script>
included in all copies or substantial portions of the Software.
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
OTHER DEALINGS IN THE SOFTWARE.
-------------------------------oOOo.............................. /.\_/.\..............................oOOo..............................