How to Create Collapsible Panels with jQuery in Dreamweaver - dummies

How to Create Collapsible Panels with jQuery in Dreamweaver

By Janine Warner

The jQuery UI accordion widget in Dreamweaver makes it easy to add collapsible panels that site visitors can open and close without refreshing the web page. This jQuery feature enables you to make better use of the space on a page by displaying more information in less space in a browser window.

You can see how the accordion collapsible panels contain the name, photo, and habitat preferences of each songbird in this nature website. The result is that you can easily see the names of all the birds on one page. To view the description of any bird, a user need only click the tab at the top of the panel (where the bird’s name appears), and the panel opens instantly.


The photo and description for the orange-crowned warbler is open while the others on the page are closed. The beauty of jQuery is that the page doesn’t have to be reloaded for the panels to open or close. Click once on a tab and a panel opens instantly. Click another tab, and that panel opens as the previously opened panel closes.

Collapsible panels can be used to display text and images as well as multimedia files such as audio, video, and Flash files.


To view an accordion panel (or many other advanced features in Dreamweaver) as it will appear in a web browser, you need to click the Live view button at the top left of the Dreamweaver workspace.

After you create a set of accordion panels with the jQuery UI menu in Dreamweaver, you can change a number of panel settings by using the Property inspector, as shown in the instructions that follow.

Follow these steps to create an accordion panel set:

  1. Place your cursor on a page where you want the accordion panels to appear.

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

    A jQuery UI collapsible accordion panel group with three panels appears in the page.


  3. Select the word Section at the top of each panel, and replace it with the text you want to appear in the panel’s Tab area.

    By default, the text in the Tab area is plain text, but you can change that by altering the corresponding CSS rule or formatting the text using HTML tags, such as the heading tags.

  4. Select the word Content in the main area of the each panel, and enter any text or images you want to display.

    You can paste text into a panel just as you’d paste text anywhere else on the page. Similarly, you insert images into panels just as you would anywhere else on a page: Place your cursor in the panel, choose Insert→Image→Image, and select the GIF, JPEG, or PNG file you want to display. You can also select a Photoshop file if you want to use Dreamweaver to optimize images.

    When you paste text into a panel, choose Edit→Paste Special to choose the amount of formatting you want to preserve in the text you paste in Dreamweaver. Limiting the amount of formatting preserved can cut down on potential style conflicts.

  5. To change the panel settings, click the blue jQuery Accordion tab at the top of the panels in the design area.

    When you click the blue tab, the panel settings appear in the Property inspector. (Correctly clicking the blue tab can be tricky, so make sure you click the blue area.) Click anywhere else on the page, and the inspector returns to its default settings.


  6. Add or remove panels using the Panels field in the Property inspector.

    To add a panel, click the plus sign (+) to the right of the Panels field. To remove a panel from an accordion set, first select the panel name in the Panels drop-down list in the Property inspector and then click the minus sign (@@min).

    You can add another panel by clicking the plus sign again.

  7. Change how panels are opened by using the Event drop-down menu.

    The Event settings control whether the panels open when a user clicks on a panel tab (Click) or rolls a cursor over the panel tab (Mouseover).

  8. Set other panel options, as desired.

    The accordion options in the Property inspector are optional, and include the capability to disable any or all panels (Disable) and animate the way panels open and close (Animate drop-down list).

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

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

  10. To change the appearance of the panel, such as the font face or text color, edit the corresponding CSS rule.

    Note: You can’t edit the corresponding styles for an accordion panel until the page has been saved and Dreamweaver has generated the corresponding CSS and JavaScript files.

  11. To see how the panels will appear in a web browser, click the globe icon at the top of the workspace and select the browser you want to use to preview the page.

    When you’re using your computer to preview a page that has an interactive feature requiring JavaScript or another programming, some web browsers, including Internet Explorer, will display a warning stating that you must allow ActiveX controls to view the page.

    This is a security warning that appears only when the page is opened on the same computer where the page is saved. If you publish the page to a web server and then view it over an Internet connection, this error will not appear for you or your site visitors.