How to create SharePoint web part tabs in web part zone?

Step 1

Add your web parts into web part zone

Step 2

1. Add html form Web Part
2. In web part properties – chrome type set none
3. Open in edit mode and copy past the code below

Script

var isfirstTime=true;

var myHeader="";

$(document).ready(function(){

var currentUrl=window.location.href;

var patern='PageView';

if(currentUrl.indexOf(patern)!= -1){

  //form is editing now (if form in editing mode don't apply tabs

  }

  else{

$("#CustomWebPartPTabsTable").closest('td[id*="MSOZoneCell_WebPartWP"]').closest('tbody').children('tr').each(function(){

var currentTdID=$(this).children('td').attr('id');

if(isfirstTime==false){

myHeader+='<td><div class="button-link"  ref="'+currentTdID+'" onclick="toggle_visibility('+currentTdID+');"> '+$(this).find('.ms-WPHeader h3').text();+'</div></td>';

//hide ribbon

$(this).find('.ms-WPHeader h3').closest('tr').hide();

//hide web part

$("#"+currentTdID).hide();

}

isfirstTime=false;

});

$("#CustomWebPartPTabsTable").append(myHeader);

//first time

$("#CustomWebPartPTabsTable td div:eq(0)").click();

}

});

function toggle_visibility(item) {

  $("#CustomWebPartPTabsTable").children('td').each(function(){

                if(item.id==$(this).find('div').attr('ref'))

                                {       

                     if($(this).hasClass('buttonSlected'))

                       {

                                                                                                $(this).addClass('buttonSlected');

                                                $(this).find('div').addClass('buttonSlected');

}

                      else

                       {

$("#" + item.id).toggle();

                                                                                                $(this).addClass('buttonSlected');

                                                $(this).find('div').addClass('buttonSlected');

                        }

                                }

                else

                                {

                                                $("#" + $(this).find('div').attr('ref')).hide();

                                                $(this).removeClass('buttonSlected')

                                                $(this).find('div').removeClass('buttonSlected');

                                }

                               

       

  });

}

Css

<style>

.button-link {

    padding: 10px 15px;

    background: white;

    color: black;

                font-size:12px

}

.button-link:hover {

    background: #c2e794;

                border-bottom: solid 1px Green;

    text-decoration: none;

}

.buttonSlected

{

    background: #c2e794 !important;

    border: solid 2px #c2e794 !important;

                color:black !important;

                font-size:16px !important;

    text-decoration: none;

               

}

</style>

Html

<table style=" border-top :solid #c2e794;"><tr id="CustomWebPartPTabsTable" style=" border-top : 1px  #c2e794;"></tr></table>

Result

Do you like this post?
Buy me a cup of coffe to show your appreciation!