Tabs Web Part

Before I get too far into this, let me first shine a light on another "tabbing" solution that was published a while ago by Christophe at Path to Sharepoint that, I feel, is a much more polished tabbing solution than this one.

The reason that I'm bothering putting any work into my own tabbing solution is that I'm more of a hobby hacker than a professional developer and I like to come up with solutions that don't require a great deal of ... shall we say ... coordination with third-parties. I'm unclear as to the privilege requirements needed to use Christophe's Easy Tabs Web Part, but I know that if I can add a web part to a page, I can implement this code without having to ask an admin to install anything for me.

So here's an example of what you'll end up with after pasting the code below into a Content Editor Web Part. And here's the code:

<span id='skip_this'></span>
<style type='text/css'>
.tab {
 float:left;
 color:darkgray;
 margin:0px 3px -1px 3px;
 padding:0px 3px -1px 3px;
 border:1px black solid;
 border-bottom:1px white solid;
 font-size:1.5em;
 cursor:pointer;
}
.actTab {
 float:left;
 font-size:1.5em;
 margin:0px 3px -2px 3px;
 padding:0px 3px -2px 3px;
 border:1px black solid;
 border-top:2px black solid;
 border-bottom:2px white solid;
 cursor:pointer;
 position:relative;
 z-index:10;
}
</style>

<div id='wpFrame' style='height:100%;width:100%;background:;'>
 <div id='wpTabs' style='width:100%;background:;float:left;'>
 </div>
 <div id='wpBody' style='width:100%;border:1px black solid;float:left;'>
 </div>
</div>

<script type="text/javascript">
// This will check to see if the page is not being edited, collect all the Web Parts on the page and put them in the Tab Format
// Also, you may specify, by Web Part Title, which Web Parts you would like to exclude from the Tab Format.
if (!document.getElementById("ctl00_WSSDesignConsole_IdDesignModeConsole_DesignModeContainer")) {
 _spBodyOnLoadFunctionNames.push("setupTabs");
 var webTabs=[];
 var webParts=[];
 var wpsToSkip=[''];
}

function setupTabs() {
 var theTDs = document.getElementsByTagName('TD'); // collect all the TDs on the page
 var wpTabs = document.getElementById('wpTabs'); // the DIV where the tabs will be added
 var wpBody = document.getElementById('wpBody') // the DIV where the Web Part content will be added
 for (var t=0;t<theTDs.length;t++) { // loop through all the TDs on the page
  var i = theTDs[t].id;
  if (i.match(/WebPartTitleWPQ/)) { // if it's a Web Part
   var title = (theTDs[t].innerText || theTDs[t].textContent).replace(/[\n\r]/g,"");
   i = i.substr(i.indexOf("WPQ"));
   var wpBod = document.getElementById("WebPart"+i);
   if (wpsToSkip.join().match(title) || // skip Web Parts that have been excluded
    wpBod.firstChild.id == 'skip_this') { // skip the CEWP that holds this code
 continue; // skip it
   } else {
    wpsToSkip.push(title); // add the Web Part being incorporated to the skip list to prevent duplication
   }
   // build a tab for the Web Part
   var newTab = document.createElement("DIV");
   newTab.innerHTML = title;
   newTab.className = 'ms-WPTitle tab';
   newTab.id = i;
   addEv(newTab);
   wpTabs.appendChild(newTab);
   webTabs.push(newTab);
   // incorporate the body into the tabbed display
   wpBody.appendChild(wpBod);
   wpBod.style.display = "none";
   webParts.push(wpBod);
   document.getElementById("MSOZoneCell_WebPart"+i).style.display = "none";
  }
 }
}

function showHide() {
 var i = event.srcElement.id;
 for (var t=0;t<webTabs.length;t++) { // bring the proper tab to the front
  webTabs[t].className = (webTabs[t].id.match(i)) ? "ms-WPTitle actTab" : "ms-WPTitle tab";
 }
 for (var w=0;w<webParts.length;w++) { // display the body element for the tab selected & hide the rest
  webParts[w].style.display = (webParts[w].id.match(i)) ? "" : "none";
 }
}

function addEv(o) {
 if (o.addEventListener) {
  o.addEventListener("click",showHide,false);
 } else if (o.attachEvent) {
  o.attachEvent("onclick",showHide);
 } else {
  o.onclick = showHide;
 }
 return o;
}
</script>

Enjoy!