tabs.js

<!– Reference jQuery on the Google CDN –>
<script src="//code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<!– Reference jQueryUI on the Google CDN –>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js" type="text/javascript"></script>
<script src="//cdn.jsdelivr.net/jquery.cookie/1.4.1/jquery.cookie.min.js" type="text/javascript"></script>
<style>
	.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; }
</style>
<script>

jQuery(document).ready(function($) {
	
	if(document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode.value == "1")
		return;
	
	//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();
		if(!title){
			//Hide it entirely
			$(webPartDiv).hide();
		} 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){
			$(webPart).hide();
		}
		
		//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
	$("#tabsContainer").tabs({
		active: 0,
		activate: function(event, ui){
			//Show the web part
			$(".tabbedWebPart-" + ui.newTab.index()).show();
			//Hide the old one
			$(".tabbedWebPart-" + ui.oldTab.index()).hide();
		}
	});
});

</script>

<div id="tabsContainer">
	<ul id="tabsContainerHeader"></ul>
	<div id="tabsContainerBody"></div>
</div>

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.

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!! :)

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.

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 :)

Michael