How to Create Tabbed Panels with jQuery in Dreamweaver - dummies

How to Create Tabbed Panels with jQuery in Dreamweaver

By Janine Warner

The jQuery UI Tab option in Dreamweaver makes it easy to add a series of panels that display or hide content corresponding to a series of tabs. Similar to the collapsible panels, this jQuery UI feature lets you display more information in less space within a browser window.


Similar to the accordion panels, tabbed panels can be used to display text, images, and multimedia.

When you create tabbed panels with the jQuery UI widget in Dreamweaver, you can specify the order of the tabs, effectively controlling what content appears when the page is first loaded.

Follow these steps to create a tabbed panel group:

  1. Place your cursor on a page where you want the tabbed panel to appear.

  2. Choose Insert→jQuery UI→Tabs, or click the Tabs item in the jQuery UI Insert panel.

    A tabbed panel is inserted into the page and the corresponding CSS files appear in the CSS Designer Source panel.


  3. In the main workspace, select the Tab1, Tab2, and Tab 3 text in turn, and then replace each tab heading with the text you want to appear in the panel’s tab area.

    You can edit the contents of the tabs only in the workspace, not in the Property inspector. By default, the text in the Tab area is bold and black, but you can change that formatting by altering the corresponding CSS rule.

  4. To adjust the size of each tab, select the tab and then use the Height and Width settings in the Property inspector.

    With an individual tab selected, the Property inspector displays the settings for that tab specifically.


  5. To add content, select the word Content in the main area of any selected tab panel and then enter text, images, or multimedia.

    You can copy text into a panel by pasting it just as you’d paste text anywhere else on the page. Similarly, insert images into panels just as you would anywhere else on a page: Choose Insert→Image→Image and then select the GIF, JPEG, or PNG file you want to display. You can also add multimedia or Photoshop files if you want to use Dreamweaver to optimize your images.

  6. To change the appearance of a tab or a panel, such as the font face or color, edit the corresponding CSS rule.

    For example, to edit the text color or font in the tabs, select the box around the tab and the box around style is automatically selected in the CSS Designer Selector panel.

  7. To edit the number or order of tabbed panels, click the blue jQuery Tabs tab at the top of the panel set in the design area.

    When you click the blue tab, the panel settings appear in the Property inspector. Click outside the blue boxed area, and the Property inspector returns to its default settings.


  8. To add tabs, click the plus sign (+) icon in the Property inspector.

    New tabs appear in the workspace.

  9. To change the order of tabs, select the tab name in the Property inspector and then use the arrows in the Panels field to move the panel.

    Panel names move up and down the menu as the order is changed. Panels and their corresponding tabs appear in the web page in the order in which they appear in the Property inspector.

  10. Select the panel in the Panels drop-down list that you want to display when the page is loaded into a web browser.

    The drop-down list corresponds to the names you give each tab in the workspace.

  11. Choose File→Save to save the page; when the Copy Dependent Files dialog box appears, click OK to automatically generate all the related files.

    For the jQuery UI features to work, you must upload these files to your web server when you upload the web page.

  12. Click the globe icon at the top of the workspace and select a browser to preview your work in a browser.

    Depending on your web browser, you may have to allow ActiveX controls to preview the page on your computer.