A Tabbed Panels 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 open accordingly as the visitor clicks different tabs. In a Tabbed Panels , only one content panel is open at a given time. The following example shows a Tabbed Panels , with the third panel open:
Dreamweaver Help | Title - Working with the Spry Tabbed Panels |

The HTML code for the Tabbed Panels 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 also includes script tags in the head of the document and after the Tabbed Panel ’s HTML markup.
Insert and edit the Tabbed Panels
Insert the Tabbed Panels
-
Select Insert > Spry > Spry Tabbed Panels.
Note:
You can also insert a Tabbed Panels by using the Spry category in the Insert panel.
Add a panel to a Tabbed Panels
-
Select a Tabbed Panels in the Document window.
-
Click the Panels plus button in the Property inspector (Window > Properties).
-
(Optional) Change the tab name by selecting the tab’s text in Design view and altering it.
Delete a panel from a Tabbed Panels
-
Select a Tabbed Panels in the Document window.
-
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 in the Document window and click the name of the panel you want to edit in the Panels menu of the Property inspector (Window > Properties).
-
Change the order of panels
-
Select a Tabbed Panels in the Document window.
-
In the Panels menu of the Property inspector (Window > Properties), select the name of the panel you want to move.
-
Click the up or down arrows to move the panel up or down.
Set the default open panel
You can set which panel of the Tabbed Panels opens by default when the page opens in a browser.
-
Select a Tabbed Panels in the Document window.
-
In the Property inspector (Window > Properties), select the panel you want open by default from the Default panel pop-up menu.
Customize the Tabbed Panels
Although the Property inspector enables you to make simple edits to a Tabbed Panels , it does not support customized styling tasks. You can alter the CSS rules for the Tabbed Panels.
All CSS rules in the topics below refer to the default rules located in the SpryTabbedPanels.css file. Dreamweaver saves the SpryTabbedPanels.css file in the SpryAssets folder of your site whenever you create a Spry Tabbed Panels . This file also contains useful commented information about various styles that apply.
Although you can easily edit rules for the Tabbed Panels directly in the accompanying CSS file, you can also use the CSS Styles panel to edit the Tabbed’s CSS. The CSS Styles panel is helpful for locating the CSS classes assigned to different parts of the Tabbed, especially if you use the panel’s Current mode.
Style Tabbed Panels text
You can style the text of a Tabbed Panels by setting properties for the entire Tabbed Panels container, or by setting properties for the components of the Tabbed individually.
-
To change the text styling of a Tabbed Panels , use the following table to locate the appropriate CSS rule, and then add your own text styling properties and values:
Text to change
Relevant CSS rule
Example of properties and values to add
Text in the entire Tabbed
.TabbedPanels font: Arial; font-size:medium;
Text in panel tabs only
.TabbedPanelsTabGroup or .TabbedPanelsTab font: Arial; font-size:medium;
Text in content panels only
.TabbedPanelsContentGroup or .TabbedPanelsContent font: Arial; font-size:medium;
Change Tabbed Panels background colors
-
To change the background colors of different parts of a Tabbed Panels , use the following table to locate the appropriate CSS rule, and then add or change background color properties and values to your liking:
Color to change
Relevant CSS rule
Example of property and value to add or change
Background color of panel tabs
.TabbedPanelsTabGroup or .TabbedPanelsTab background-color: #DDD; (This is the default value.)
Background color of content panels
.Tabbed PanelsContentGroup or .TabbedPanelsContent background-color: #EEE; (This is the default value.)
Background color of selected tab
.TabbedPanelsTabSelected background-color: #EEE; (This is the default value.)
Background color of panel tabs when the mouse pointer moves over them
.TabbedPanelsTabHover background-color: #CCC; (This is the default value.)
Constrain the width of tabbed panels
By default, the Tabbed Panels expands to fill available space. You can constrain the width of a Tabbed Panels , however, by setting a width property for the accordion container.
-
Locate the .TabbedPanels CSS rule by opening the SpryTabbedPanels.css file. This rule defines properties for the main container element of the Tabbed Panels .
You can also locate the rule by selecting the Tabbed Panels , and looking in the CSS Styles panel (Window > CSS Styles). Make sure the panel is set to Current mode.
-
Add a width property and value to the rule, for example width: 300px;.