Using two spry tabbed panels within the same site or page

***LATEST UPDATE*** If you're looking for a simple tabbed panels script, check out my other post about jQuery.

***UPDATED*** This post has been updated - see the "widget inside widget" section for details.

Dreamweaver's Spry Tabbed Panels is one of the most versatile scripts I've worked with. I've been able to implement it with a variety of other scripts with virtually no conflicts. It's even possible to have two or more tabbed panels with different styles in the same website, webpage, or even within each other - here's how.

Within the same website
Each spry tabbed panels widget is referenced in your html:

var TabbedPanels1 = new Spry.Widget.TabbedPanels("divID")

This tells to look for function name "spry.widget.tabbedpanels" in the js script file to determine which css styles to apply. That's why you'll first need two "SpryTabbedPanels.js" files, each referencing the appropriate css styles.

To do this, edit the lines this.tabSelectedClass, this.tabHoverClass, this.tabFocusedClass, this.panelVisibleClass (lines 11-14) to use the class names you want - you should create the css styles first though. Save them separately - for example as 'sprytabbedpanels1.js' and 'sprytabbedpanels2.js' and make sure you reference both files in your <'head'> tag.

Next, to connect each widget to the correct css styles, change the name in the html reference - for example to something like:
var TabbedPanels1 = new Spry.Widget.Panels("divID")

Then open the 'sprytabbedpanels.js' file that references the css classes that you want associated with the widget instance that you just changed, and replace all spry.widget.tabbedpanels with the new name - in this case Spry.Widget.Panels. This is a basic find-replace; nothing more. The name doesn't really matter, so long as it's consistent.

Quick summary:
1) Each "var TabbedPanels1 ..." line is referencing the same widget name as exist in the js file.
2) Lines 11-14 in each sprytabbedpanels.js file are referencing classes that exist in the stylesheet.
3) Each "var TabbedPanels1 ..." line is referencing the divID in the div that you want the styles to apply.
4) All js and stylesheets are referenced in your head tag of each page.

If you've done all of the above everything should work smoothly. I know it did for me...

Within the same page, separated
This is a bit more complicated but definitely possible. First, to avoid major functionality problems, the "var TabbedPanels1 ..." line should appear immediately after the closing "div" tag of each tabbed panels widget. Otherwise the browser can easily mess up your panels and content. Then follow the instructions above for multiple widgets within the same site and you should be good to go.

Within the same page, widget inside widget
I actually had a case where I had a tabbedpanels widget where each panel's content was another tabbedpanels widget! Here, I used all the techniques mentioned above, and was able to get everything working except for the different class styles to show for "hover" and "selected" states. My trick was to use pictures to overcome this issue, at least for the tabs. Creating images as if for a button, I added the following code - from Dreamweaver's menu bar widget - inside the <'li'> tag to get the tab to change to over state when a user clicks it:

'< onclick="MM_nbGroup('down','group1','button-id','path-to-over-image',state-id)" onmouseover="MM_nbGroup('over','group-id','path-to-over-image','',state-id)" onmouseout="MM_nbGroup('out')">< src="path-to-up-image" alt="" name="button-id" border="0" id="button-id" onload="MM_nbGroup('init','group1','button-id', 'path-to-up-image', '', state-id)">< /a>'

(Remember to remove the spaces when opening tags).

*** UPDATED ***
I just realized that my instructions for spry tabbed panels within spry tabbed panels imply that you should change the function name (spry.widget.tabbedpanels) in the html reference and javascript file. This should be done to achieve different styles as long as the widgets are not within each other. If they are, do not follow this step or your widget will not work! Accordingly, you don't need to change the css class names in the javascript code, either.

To achieve different styles for a widget inside another widget, you can add a new div with a class name defined in your regular stylesheet inside the < 'li > of each tab or < 'div > of each panel. This would work for the up-state only (i.e. until the tab is clicked). If you want the different style to persist when clicked on, use images as described above.

The quickest way to place a widget inside another widget is to open Design view, then choose the tab corresponding to the panel where you want the inner widget to appear, place the cursor inside the panel, and click on the insert widget button.

May seem complicated but easy if you understand how the script works. Anyway, enjoy!