Show Multiple WebParts in Tab in a SharePoint 2013 Page

Introduction

For any site home page content organization is always difficult for organizations and developers. We always need to take care of the look and feel of the home page. If there is too much content on the page entered directly then it creates a vertical (or horizontal) scrollbar. Normal users like to see the content with a very good look and in the least number of clicks. This leads to the idea of creating Tab Controls that help content owners to deliver the content in a more user-friendly way.

This article explains how to customize your SharePoint Home page using a Tab Control.

To create a tab control web part Out-Of-Box (OOB) we need to use the following procedure.

Step 1: Create a Document Library named JSLibrary.

document library

Step 2: Add folder Tab.
 
Add folder Tab

Step 3: Add three Jquery.min Jquey-ui,jquery-ui.min files inside the Document Library Folder.
 
document Library Folder

Step 4: Open site in SharePoint Designer.

Step 5: Open Site Page.
 
Open Site Page

Step 6: Add an aspx page by right-clicking on the right panel.
 
Add an aspx page

Step 7: Modify the code as below:
 

<%@ Page Language="C#" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"

    MasterPageFile="../_catalogs/masterpage/default.master" Title="MyTabPage" meta:webpartpageexpansion="full"

    meta:progid="SharePoint.WebPartPage.Document" %>

<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages"

    Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register TagPrefix="SPSWC" Namespace="Microsoft.SharePoint.Portal.WebControls"

    Assembly="Microsoft.SharePoint.Portal, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register TagPrefix="cc2" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register TagPrefix="ListWP" Namespace="AS.SPD.ListWP.ListWP" Assembly="AS.SPD.ListWP, Version=1.0.0.0, Culture=neutral, PublicKeyToken=0ad98201a0b5e35b" %>

<asp:content id="Content1" runat="Server" contentplaceholderid="PlaceHolderMain">

<WebPartPages:SPProxyWebPartManager runat="server" id="ProxySPWebPartManager">

</WebPartPages:SPProxyWebPartManager>

<div id="tabs">

<ul>

    <li><a href="#tab-1"><span>Country</span></a></li>

    <li><a href="#tab-2"><span>State</span></a></li>

    <li><a href="#tab-3"><span>Company</span></a></li>

    <li><a href="#tab-4"><span>Product</span></a></li>

</ul>

<div id="tab-1">

    <WebPartPages:WebPartZone id="g_ABDF1003120448C49C08000C6F40EEB5" runat="server" title="Zone 1

    <ListWP:ListWP runat="server" ListName="Country" Description="My Visual WebPart" Title="ListWP" __MarkupType="vsattributemarkup" __WebPartId="{3f8f327e-86fe-4610-8f66-820b6a2b6eab}" WebPart="true" __designer:IsClosed="false" partorder="2" id="g_3f8f327e_86fe_4610_8f66_820b6a2b6eab"></ListWP:ListWP>

    </WebPartPages:WebPartZone>

    <!-- Web part Zone -->

</div>

<div id="tab-2">

    <WebPartPages:WebPartZone id="g_6F24E0B648C44467A24948C7C67D3EF5" runat="server" title="Zone 2">

    <ListWP:ListWP runat="server" ListName="State" Description="My Visual WebPart" Title="ListWP" __MarkupType="vsattributemarkup" __WebPartId="{b7b15812-4923-43ad-9b7d-ef027517ba98}" WebPart="true" __designer:IsClosed="false" partorder="2" id="g_b7b15812_4923_43ad_9b7d_ef027517ba98"></ListWP:ListWP>

    </WebPartPages:WebPartZone>

<!-- Web part Zone -->

</div>

<div id="tab-3">

    <WebPartPages:WebPartZone id="g_F4D87570C76D4CC28D458FDB12F49FE7" runat="server" title="Zone 3">

    <ListWP:ListWP runat="server" ListName="Company" Description="My Visual WebPart" Title="ListWP" __MarkupType="vsattributemarkup" __WebPartId="{d07f3072-892d-4856-8d3d-aa3c42b11015}" WebPart="true" __designer:IsClosed="false" partorder="2" id="g_d07f3072_892d_4856_8d3d_aa3c42b11015"></ListWP:ListWP>

    </WebPartPages:WebPartZone>

    <!-- Web part Zone -->

</div>

<div id="tab-4">

    <WebPartPages:WebPartZone id="g_1C783BE3E6524B3ABD5C4E9F3C766681" runat="server" title="Zone 4">

    <ListWP:ListWP runat="server" ListName="Product" Description="My Visual WebPart" Title="ListWP" __MarkupType="vsattributemarkup" __WebPartId="{6d47c8fe-1c86-4b7e-b22c-4ea148f76fea}" WebPart="true" __designer:IsClosed="false" partorder="2" id="g_6d47c8fe_1c86_4b7e_b22c_4ea148f76fea"></ListWP:ListWP>

    </WebPartPages:WebPartZone>

    <!-- Web part Zone -->

</div>

</div>

</asp:content>

<asp:content id="Content2" runat="server" contentplaceholderid="PlaceHolderAdditionalPageHead">

<script type="text/javascript" src="../JSLibrary/Tab/jquery.min.js"></script>

<script type="text/javascript" src="../JSLibrary/Tab/jquery-ui.min.js"></script>

<link href="../JSLibrary/Tab/jquery-ui.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript">

    $(document).ready(function () {

        $("#tabs").tabs();

    });

</script>

</asp:content>

 
Output 

Summary

In this article we have explored step-by-step how to add web parts in a tab using jQuery.