Bottom and top Spry tabbed panels on one page

I posted a while back about how to create a Spry tabbed panel with the tabs at the bottom of the panel. The changes I suggested will cause other tabbed panels to be broken. I should have warned about that happening in that post, and suggested a different way that allows bottoms and tops to co-exist peacefully. Someone ran into the issue when they wanted to have top and bottom tabs on the same page. Here is what should work to allow both:

1). Add the following code to the head of your document. The styles and functions will be used to make sure that the bottom tabs look and work properly.

<style type="text/css">
<!--
.TabbedPanelsBottomTab {
position: relative;
top: -1px;
float: left;
padding: 4px 10px;
margin: 0px 1px 0px 0px;
font: bold 0.7em sans-serif;
background-color: #DDD;
list-style: none;
border-left: solid 1px #CCC;
border-bottom: solid 1px #999;
border-top: solid 1px #999;
border-right: solid 1px #999;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
}
.TabbedPanelsBottomTabSelected {
background-color: #EEE;
border-top: 1px solid #EEE;
}
-->
</style>
<script type="text/javascript">
<!--
var getBottomTabGroup = function()
{
    if (this.element)
    {
        var children = this.getElementChildren(this.element);
        if (children.length)
        return children[1];
    }
    return null;
};

var getBottomContentPanelGroup = function()
{
    if (this.element)
    {
        var children = this.getElementChildren(this.element);
        if (children.length > 1)
        return children[0];
    }
    return null;
};
-->
</script>

2). Next modify your bottom tabs to look similar to the following code. Note that the main changes from a top tab is that the tabs UL is at the bottom, and that the LIs now have a class of "TabbedPanelsBottomTab" (defined in the STYLE block above):

<div id="TabbedPanels2" class="TabbedPanels">
    <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">Content 1</div>
        <div class="TabbedPanelsContent">Content 2</div>
    </div>
    <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsBottomTab" tabindex="0">Tab 1</li>
        <li class="TabbedPanelsBottomTab" tabindex="0">Tab 2</li>
    </ul>
</div>

3). Next, in the constructor for the bottom tabbed panel, change it to (all one line of code if you like):

var TabbedPanels2 = new Spry.Widget.TabbedPanels("TabbedPanels2",
    {
        tabSelectedClass:"TabbedPanelsBottomTabSelected",
        getTabGroup : getBottomTabGroup,
        getContentPanelGroup: getBottomContentPanelGroup
    }
);

The options being passed in tell the bottom tabbed panel to use the "TabbedPanelsBottomTabSelected" CSS class as the class when a tab is selected (this class is defined in the STYLE block added in step 1), as well as override the getTabGroup and getContentPanelGroup methods of the Spry Tabbed panel object to use the functions defined in the SCRIPT block added in step 1.

Now preview your page. The bottom and top tabs should work correctly. Note: The bottom tabs will not look correct in Dreamweaver's design view due to how Dreamweaver handle's the display of Spry widgets is not compatible with the changes made above. In particular, in design view you will likely see the content of each tab, and only see the first tab displayed.