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.

Step 2: Add folder Tab.

 

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

 

Step 4: Open site in SharePoint Designer.

Step 5: Open Site Page.

 

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

 

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>

 

 

Summary

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