Adobe Dreamweaver CC 2014 v.13 - Manual (Page 301)

Working with the Spry Tabbed Panels widget
To the top
To the top
About the Tabbed Panels widget
Insert and edit the Tabbed Panels widget
Customize the Tabbed Panels widget
Note: Spry widgets are replaced with jQuery widgets in Dreamweaver CC and later. While you can still modify existing spry widgets on your
page, you cannot add new spry widgets.
About the Tabbed Panels widget
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 .
Insert and edit the Tabbed Panels widget
Insert the Tabbed Panels widget
Select Insert > Spry > Spry Tabbed Panels.
Note: You can also insert a Tabbed Panels widget by using the Spry category in the Insert panel.
Add a panel to a Tabbed Panels widget
1. Select a Tabbed Panels widget in the Document window.
2. Click the Panels plus button in the Property inspector (Window > Properties).
3. (Optional) Change the tab name by selecting the tab’s text in Design view and altering it.
Delete a panel from a Tabbed Panels widget
1. Select a Tabbed Panels widget in the Document window.
2. In the Panels menu of the Property inspector (Window > Properties), select the name of the panel you want to delete and click the minus
button.
Open a panel for editing
Do one of the following:
Move the mouse pointer over the tab of the panel you want to open in Design view and click the eye icon that appears at the right of the tab.
Select a Tabbed Panels widget in the Document window and click the name of the panel you want to edit in the Panels menu of the Property
294