Like many others I found EasyTabs to be a great fix. It has matured into something really great but that is not always the right tool for me so I went looking for a simpler solution. I wrote some jQuery that trawled the page and moved content around. It worked just fine but then I came across some very similar code but that used jqueryUI to create more elegant tabs.
The final code I used is below.
< !– Reference the jQueryUI theme’s stylesheet on the Google CDN. Here we’re using the “Start” theme — >
< link type=”text/css” rel=”stylesheet” href=”//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/start/jquery-ui.css” / >
< script type=”text/javascript” src=”//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”>< /script>
< script type=”text/javascript” src=”//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js”>< /script>
< script type=”text/javascript”>
jQuery(document).ready(function($) {
// Visible title of each web part goes here.
liTargetForTabs([“Web Part Title 1″,”Web Part Title 2”]);
});
function liTargetForTabs(TitlesOfWebParts)
{
for(index in TitlesOfWebParts)
{
var titlePassed = TitlesOfWebParts[index];
$(“#liTargetForTabs”).append(‘< li>< a href=”#Tab’+index+'”>’+titlePassed+'< /a>< /li>’).after(‘< div id=”Tab’+index+'”>< /div>’);
$(“span:contains(‘”+titlePassed+”‘)”).each(function(){
if ($(this).text() == titlePassed){
$(this).closest(“span”).hide().closest(“[id^=’MSOZoneCell_WebPart’]”).appendTo($(“#Tab” + index)); }
});
}
$(“#targetForTabs”).tabs();
}
< /script>
< div id=”targetForTabs”>
< ul id=”liTargetForTabs”>< /ul>
< /div>