Home > customization and design, SharePoint Server 2010 > How to Transfer a SharePoint web part Zone into tabs??

How to Transfer a SharePoint web part Zone into tabs??

How to Transfer a SharePoint web part Zone into tabs??

I do quite a bit of design and implementation on the SharePoint platform. Today, I created a very handy little script that I think might be something worth sharing. I don’t often post anything so specific on my blog, but I found this to be extremely useful, and I hope you do too.

What is it?

This all started with a great idea from the mind of Matthew Koon. If you’re not familiar with SharePoint, one thing you can do in the platform is place web parts on a page, which are akin to sidebar widgets in WordPress or other CMS platforms. Web parts have a lot of nifty drag-and-drop functionality, but the appearance of them is pretty much limited to what you can do with a bit of CSS and maybe some background images. The script that I created transforms a particular “web part zone,” which contains individual web parts, into a jQuery UI tab control. For each web part in the zone, you see an interactive “tab” instead of a boring static box. The contents of each tab is the contents of the web part, itself.

What does it do?

When you’re editing a page, you’ll see this:

When you publish the page, you’ll see this:

1. Attach Required Scripts

You’ll need both jQuery 1.4.2 and jQuery UI 1.8.5 (or later).

2. Attach the Script

Paste this into an attached JavaScript file:


$.fn.wpTabify = function(){

if($(‘.ms-WPAddButton’).size() == 0){

return this.each(function(i){

var tabList = $(‘<ul/>’);

var panels = $(‘<div/>’);

$(this).find(‘.s4-wpTopTable,td[id^=”MSOZoneCell_”] > table’).each(function(j){

$(tabList).append(‘<li><a href=”#ui-tab-panel’ + i + j + ‘”>’ + $(this).find(‘h3.ms-WPTitle’).text() + ‘</a></li>’);

var thisPanel = $(‘<div id=”ui-tab-panel’ + i + j + ‘” class=”wpt-ui-tabs-panel”/>’);

var panelContents = $(this).detach();




if($(tabList).find(‘li’).size() > 0){








return false;




3. Wrap Your Web Part Zone

In your custom page layout, place a <div/> tag around a web part zone, and give it a class name or ID of your choosing.


<WebPartPages:WebPartZone id=”zone1″ runat=”server” title=”Tabs Zone”><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>


4. Run the Script

Now that you’ve attached the script, run it using a jQuery selector that matches the <div> you created in step three (above). This code also goes in an attached JavaScript file.




5. Add Some Style (Optional)

You may choose to add a bit of style to your newly tabified web parts (this is not specific to this plug-in, these are just some generic jQuery tabs styles):

.ui-tabs-nav {

margin: 0;

padding: 0;


.ui-tabs-nav li {

list-style: none;

margin: 0 1px 0 0;

padding: 0;

float: left;


.ui-tabs-nav a {

position: relative;

top: 1px;

display: block;

padding: 10px 8px;

border: solid #e1e0dc;

border-width: 1px 1px 0 1px;

background: #d6d6d6;

color: #999;

text-decoration: none;

-webkit-border-top-left-radius: 5px;

-webkit-border-top-right-radius: 5px;

-moz-border-radius-topleft: 5px;

-moz-border-radius-topright: 5px;

border-top-left-radius: 5px;

border-top-right-radius: 5px;


.ui-tabs-nav li.ui-tabs-selected a {

color: #c70d37;

background: #fff;


.ui-tabs-panel {

clear: both;

padding: 20px;

background: #fff;

border: 1px solid #e1e0dc;


.ui-tabs-hide {

display: none;






  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: