How to Edit Accordion Panels in Dreamweaver

Manage Dreamweaver-generated Web objects.

Adobe Dreamweaver enables you to build dynamic Web pages using a versatile interface. You can generate a wide range of layout and display objects using the available tools. Accordion panels display or hide data in various tabs. The panel is generated by Dreamweaver with basic data initially provided. You can use Dreamweaver to edit the data as well as the associated CSS style.

Instructions

1. Open your Web page in Dreamweaver.

2. Locate the Accordion panel and click in the content area to select the current data. Type the content you want to insert.

3. Open the CSS Styles panel. Click the "height" value and change it to "100px" to change the height of your content area.

4. Click the "margin" value while still in the content area and change it to "12px" to offset your text from the edge of the tab.

5. Save the CSS "SpryAccordion.css" file that opened. Save your Web page and view the results of your changes in an Internet browser.

References

• Adobe Labs: Working with the Spry Accordion Widget

Resources

• Adobe Help Resource Center: Accordion Widget Overview and Structure