Skip to content

Instantly share code, notes, and snippets.

@johnnycardy johnnycardy/tabs.js
Last active Oct 15, 2019

What would you like to do?
<!– Reference jQuery on the Google CDN>
<script src="//" type="text/javascript"></script>
<!– Reference jQueryUI on the Google CDN>
<link rel="stylesheet" href="//" />
<script src="//" type="text/javascript"></script>
<script src="//" type="text/javascript"></script>
.ui-widget-header { background: none; border-radius: 0; border-left: 0; border-top: 0; border-right: 0; }
#tabsContainer { border:none;}
.ms-webpartzone-cell { margin: 0 !important; border:0; }
jQuery(document).ready(function($) {
if(document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode.value == "1")
//Get the web parts
var $allWebParts = $("#s4-workspace .ms-webpartzone-cell");
//Exclude the web part we're currently in - we know by the existence of the tabsContainer div
$allWebParts = $.grep($allWebParts, function(webPartDiv){
return $(webPartDiv).find("#tabsContainer").length === 0;
//Exclude web parts with no content (height of zero)
$allWebParts = $.grep($allWebParts, function(webPartDiv){
return $(webPartDiv).height();
//Exclude web parts that don't have a title since a title is needed for the tab
$allWebParts = $.grep($allWebParts, function(webPartDiv){
var title = $(webPartDiv).find(".ms-webpart-chrome-title").text();
//Hide it entirely
} else {
return true;
//Set up the tabContainer
$.each($allWebParts, function(i, webPart){
//Get the title, hide it and retrieve its text
var title = $(webPart).find(".ms-webpart-chrome-title").hide().text();
$("#tabsContainerHeader").append("<li><a href='#tab-" + i + "'>" + title + "</a></li>");
//Hide the entire web part (except for the first one which will be initially selected)
if(i !== 0){
//Add a class to later identify it
$(webPart).addClass("tabbedWebPart-" + i);
//Add a dummy tab for jqUI
$("#tabsContainerBody").append("<div id='tab-"+ i +"' style='padding:0'></div>");
//Tell jQueryUI to render
active: 0,
activate: function(event, ui){
//Show the web part
$(".tabbedWebPart-" + ui.newTab.index()).show();
//Hide the old one
$(".tabbedWebPart-" + ui.oldTab.index()).hide();
<div id="tabsContainer">
<ul id="tabsContainerHeader"></ul>
<div id="tabsContainerBody"></div>

This comment has been minimized.

Copy link
Owner Author

johnnycardy commented Apr 7, 2016

Script for displaying the web parts of a SharePoint WebPartPage inside tabs.

  1. Upload this file - tabs.js - to the SiteAssets library.
  2. Create web part page and add web parts to it. Make sure the title is visible (via the Chrome Type property). The title will be the Tab name.
  3. Add a Content Editor web part to the page. Edit its properties and set the Link to '../SiteAssets/tabs.js'
  4. Save the page. Web parts should be rendered inside tabs.

This comment has been minimized.

Copy link

rach-wong commented Jan 17, 2018

Hi, thank you for sharing the code. This works on sharepoint 2013. Is there a way to only grab all web parts from within one zone (i.e. left zone, right zone) instead of all web parts on the whole page? Thank you once again!! :)


This comment has been minimized.

Copy link

dhpaul1031 commented Apr 3, 2018

HI. Doesn't seem to work in SharePoint online, or least not with my site. It works fine in page edit mode, but when you close the editor it displays an empty page. The tabbed content doesn't display at all.


This comment has been minimized.

Copy link

Michael1958 commented Oct 15, 2019

Hello All.

How about hiding the tabs when list or library in the web part is empty? Although I can see a reference of empty web parts, within the code, it does not seem to work.

Thank you in advance for your prompt reply :)


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.