Search
Close this search box.

Easy Tabs for SharePoint 2013

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.

  1. Copy the code below and save it as .txt file. (Or download the htm code file directly from URLs given in bottom of this article.)
  2. Upload the txt file to SharePoint site -> Site Assets library.
  3. Open the page where you want to have tabbed webparts.
  4. Edit the page and add Content Editor Webpart on bottom in Same Webpart Zone. (Note: The code will create tabs with WebParts only on same webpart zone.)
  5. In Content Editor Webpart properties, the set/enter URL for .txt file (which uploaded on Site Assets Library.) on “Content Link” property.
  6. Expand “Layout” section on the Content Editor webpart and enable/check “Hidden” option. If “Hidden” option is disabled then set “Chrome Type” property (under​ Appearance section) to “None”.
  7. Click “OK” to save changes of webpart properties.
  8. Save the page and publish(If enabled).
  9. Refresh the page to see EasyTabs in Action​.

You can change the color codes in below CSS style section to match with your site theme.

Disclaimer: Easy Tabs code developed/licensed by Christophe Humbert. I just fixed it to work in SharePoint 2013.
http://usermanagedsolutions.com/SharePoint-User-Toolkit/Pages/Easy-Tabs-v5.aspx

<!– Code Start Here –>

<!-- 
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>
<!-- Code Ends Here -->

<!-- 

Copyright (c) 2009-2012 Christophe Humbert

 Permission is hereby granted, free of charge, to any person

 obtaining a copy of this software and associated documentation

 files (the “Software”), to deal in the Software without

 restriction, including without limitation the rights to use,

 copy, modify, merge, publish, distribute, sublicense, and/or sell

 copies of the Software, and to permit persons to whom the

 Software is furnished to do so, subject to the following

 conditions:

 The above copyright notice and this permission notice shall be

 included in all copies or substantial portions of the Software.

 THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND,

 EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES

 OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND

 NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT

 HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,

 WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING

 FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR

 OTHER DEALINGS IN THE SOFTWARE.

–>
——————————-oOOo………………………… /.\_/.\…………………………oOOo…………………………

If above code doesn’t work, Download from here :http://1drv.ms/1XBFB1a

If One Drive Blocked in your organization, then try below URLs. http://justpaste.it/easytabsv5
http://jsfiddle.net/venkatx5/q3pjLvp7/

Happy Coding!

posted on Thursday, May 21, 2015 10:50 AM

This article is part of the GWB Archives. Original Author: Sharep10nt

Related Posts