A Tabbed Panels widget is a set of panels that can store content in a compact space. Site viewers hide or reveal the content stored in the Tabbed Panels by clicking the tab of the panel they want to access. The panels of the widget open accordingly as the visitor clicks different tabs. In a Tabbed Panels widget, only one content panel is open at a given time. The following example shows a Tabbed Panels widget, with the third panel open:

A.

Tab

B.

Content

C.

Tabbed Panels widget

D.

Tabbed panel

The HTML code for the Tabbed Panels widget comprises an outer div tag that contains all of the panels, a list for the tabs, a div to contain the content panels, and a div for each content panel. The HTML for the Tabbed Panels widget also includes script tags in the head of the document and after the Tabbed Panel widget’s HTML markup.

For a more comprehensive explanation of how the Tabbed Panels widget works, including a full anatomy of the widget’s code, see www.adobe.com/go/learn_dw_sprytabbedpanels.