By default, the Tabbed Panel CSS does not define a height or width to the widget.

The height of the widget will change depending on the size of the content of the current open panel.

To set a fixed size for the widget, set the 'height' of the class .TabbedPanelsContent to whatever value you need. Overflow should be set to handle content longer than the set height.

Tab 2 Content

Default Panel set to open the 3rd panel onLoad. Spry has a 0 based counting system, so the constructor option {defaultTab: 2} will open the 3rd panel.

.TabbedPanels class has been set to a width of 500 pixels, so all widgets that use that class on this page will be that width.

Also, tabindex="0" has to be set on every tab element for keyboard navigation to work correctly.

Tab 4 Content

Open Panel Tab 1 | Tab 2 | Tab 3 | Tab 4

Open Panels programmatically by putting function calls on the <a> tag.
onclick="TabbedPanels1.showPanel(1);" where "TabbedPanels1 is the widget id.
onclick="TabbedPanels1.showPanel(2);"
onclick="TabbedPanels1.showPanel(3);"

Tabbed Panels can just as well be rendered vertically.

Using the default CSS file that comes with the widget, set the class of the main widget container tag from class="TabbedPanels" to class="VTabbedPanels".

The widget will now use the VTabbedPanels classes and the tabs will render vertically, on the left. The markup is identical as is the other functionality.

This sample also shows how keyboard navigation can be enabled by wrapping each tab content with an <a>.
Content 3
Content 4

Tab 1

Tab 2

Tab 3

Alternate Content Version. Check the markup used in this sample.

One of the rules of Spry Widgets is that we don't really care about the actual markup; what matters is the structure of the widget. As long as tags are nested in the same order, it doesn't matter what the markup is, as long it it follows HTML rules.

Content 3