Tab with web parts in Sharepoint 2013

Implement a feature about tabbing content with multiple web parts, each associated with a header in a list. I will achieve it in SharePoint 2013.

to tab select web parts, I can regared the web part zone as a div, and all the web parts should be single panel. here is my steps:

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!?