If you want the tabs below the content instead of on top or on the left for
whatever reason here is how I've done it.

First of all, switch the tab and content DIVs in your html file. So <ul
class="TabbedPanelsTabGroup">XXXX</div> is beneath <div
class="TabbedPanelsContentGroup">XXXX</div>.

Next open the .js file and find find
Spry.Widget.TabbedPanels.prototype.getTabGroup = function(). Replace the
function body to:
{
if (this.element)
{
var children = this.getElementChildren(this.element);
if (children.length > 1)
return children[1];
}
return null;
};


Now find Spry.Widget.TabbedPanels.prototype.getContentPanel Group = function().
Replace the function body to:
{
if (this.element)
{
var children = this.getElementChildren(this.element);
if (children.length)
return children[0];
}
return null;
};

NOTE: you've basically just swapped the functions.

That should be it. You now might need to edit the .css file to alter the
borders so that the tabs appear correctly.