Tab with Web Parts in Sharepoint 2013

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'll 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 is a single panel. Here is my steps:

1. Create a page layout

2. Add a div as a container, in the 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 W EB part Zone snippet--> <!--spm:<% @Register tagprefix= "WebPartPages" namespace= "Microsoft.sharepoi Nt. WebPartPages "assembly=" Microsoft.SharePoint, version=15.0.0.0, culture=neutral, publickeytoken=71e9bce111e9429c "% >--> <div xmlns:ie= "ie" > <!--ms:<webpartpages:webpartzone runat= "serve R "allowpersonalization=" false "id=" x774799e39f4841a58494c7cdf6dd1b4f "frametype=" titlebaronly "Orientation=" Vertical ">--> <!--ms:<zonetemplate>--> <!--dc:replace this COM ment with the 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 this cool!?

Tab with Web Parts in Sharepoint 2013