Tabbing web parts in a SharePoint web part page using jQuery and jQueryUI

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 original source for this along with some good comments can be found here.

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=”//” / > 
< script type=”text/javascript” src=”//”>< /script>
< script type=”text/javascript” src=”//”>< /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>’);
                if ($(this).text() == titlePassed){
                    $(this).closest(“span”).hide().closest(“[id^=’MSOZoneCell_WebPart’]”).appendTo($(“#Tab” + index));  }
< /script>
< div id=”targetForTabs”>
< ul id=”liTargetForTabs”>< /ul>
< /div>