Tabbed Panels Widget Sample

The Tabbed Panels widget is a disclosure widget that has a series of tabs along the top (or side) of the widget that opens content panels attached to the tabs.

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.

Default Panel set to open the 3rd panel when the page loads. 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.

Tabindex="0" can be set on every tab element for keyboard navigation to work. You may also use anchors to enable the keyboard navigation. The 3rd sample down shows this functionality. As a note, using TabIndex for accessibility will not validate at W3C but include it here because IE and Mozilla browsers support it for accessibility reasons. Use anchors if your page needs to validate.

Tab 1 Content
Tab 2 Content

Tab 3 Content

More Content

More Content

Tab 4 Content

Using Links to open tabs

Open Panel with Panel Number 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);"

 

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

Content 1
Content 2
Content 3
Content 4

 

 

Vertical Tabs and Anchors for Keyboard Navigation

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 uses anchors in the tabs to enable switching between tabs. Use the Tab key to choose the tab and Enter to open the panel.

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

Alternate Markup

Widget can use almost any tag to create the structure, as long as the correct nesting structure is maintained.

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

Setting the Panels to open with onMouseOver

This example demonstrates how to open panels using the showPanel() behavior.

Content 1
Content 2
Content 3
Content 4