Tabbed web part zone SharePoint 2013

I’ve just been looking into this for a tabbed web part zone and recreated some script found online here to work with SharePoint 2013 ​​​​​​. I’ve modified it to take the image from the web part header as well so it renders it in the tab.

​(function ($) {

$.fn.wpTabify = function () {
 if($(‘.ms-WPAddButton’).size() == 0){
      return this.each(function(i){
        var tabList = $(‘<ul class=”wpt-ui-tabs-nav”/>’);
        var panels = $(‘<div class=”wpt-ui-tabs-wrapper”/>’);
 $(tabList).append(‘<li>’ + ‘<img src=”‘ + $(this).find(‘ img’).attr(‘src’) + ‘”/>’ + ‘<a href=”#ui-tab-panel’ + i + j + ‘”>’ + $(this).find(‘’).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){
else {
return false;

Use this to call the function

<script type=”text/javascript”>

It uses jQuery UI to render. so use the bellow links.

<script type=”text/javascript” src=”//”></script>
<script type=”text/javascript” src=”//”></script>
<link rel=”stylesheet” href=”//” />​

Leave a Reply

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s