Tab with web parts from web part zone in Sharepoint 2013

Tab with web parts in Sharepoint 2013

1. create a page layout

2. add a div as a container, In this div, append a div as a title to switch button

<div class="sp-content-up">

<div class="tab ms-webpart-titleText">

</div>

<div class="clear"></div>

<div data-name="WebPartZone">
<!--CS: Start Web Part Zone Snippet-->
<!--SPM:<%@Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<div xmlns:ie="ie">
<!--MS:<WebPartPages:WebPartZone runat="server" AllowPersonalization="false" ID="x774799e39f4841a58494c7cdf6dd1b4f" FrameType="TitleBarOnly" Orientation="Vertical">-->
<!--MS:<ZoneTemplate>-->
<!--DC: Replace this comment with default web parts for new pages. -->
<!--ME:</ZoneTemplate>-->
<!--ME:</WebPartPages:WebPartZone>-->
</div>
<!--CE: End Web Part Zone Snippet-->
</div>
</div>

3. cretae a page using the new page layout, and add serveral web parts in the page.

4. add css and js using Script Edit web part in the new page

<script>
$(document).ready(function(){
$(".sp-content-up .ms-webpart-titleText").find("span").each(function(){
if( this.innerHTML !="" && this.innerHTML !=undefined){
$(".sp-content-up .tab").append("<div class='tabtitle'>" + this.innerHTML + "</div>");
}
});

$(".sp-content-up .ms-webpart-chrome-title").hide();
$(".sp-content-up .ms-webpartzone-cell:eq(0)").addClass("tabcontentshow");
$(".tabtitle:eq(0)").addClass("tabtitleclick");
$(".tabtitle").on("click", function () {
var otherTitle = $(".tabtitle:not(.tabtitle:eq('" + $(this).index() + "'))");
var otherContent = $(".sp-content-up .ms-webpartzone-cell:not(.sp-content-up .ms-webpartzone-cell:eq('" + $(this).index() + "'))");
$(".sp-content-up .ms-webpartzone-cell:eq('" + $(this).index() + "')").addClass("tabcontentshow");
$(this).addClass("tabtitleclick");
otherContent.removeClass("tabcontentshow");
otherTitle.removeClass("tabtitleclick");
});
});

</script>

<style>
.sp-content-up  .tabtitle{
font-size:13px !important;
}
.tabtitle{
float: left;
margin-right:2px;
width: 200px;
height:30px;
background-color: rgb(230, 230, 230);
color: black;
text-align:center;
cursor:pointer;
border-width:1px;
border-color: gray;
border-style: solid;
}

.tabtitleclick {
background-color:white;
border-bottom-color: white;
}

.tabtitle:hover {
background-color: rgb(241, 241, 241);
}

.clear {
clear: both;
}

.sp-content-up .ms-webpartzone-cell {
display: none;
}
.sp-content-up   .tabcontentshow {
display: block;
color: white;
}

</style>

5. check the result, is that cool!?