How to Have More Than One Collapsible Spry Panel

Spry widgets allow users to add interactivity features on Web pages.

The Spry module of the Dreamweaver Web editor allows users to create drop-down menus, collapsible panels and custom Web page controls. A Spry widget is a page-control element that includes HTML, CSS and JavaScript code to enable user interaction. A collapsible panel Spry widget is a panel that can store application data in a compact form. Users hide or reveal the content stored in the Collapsible Panel by clicking the tab of the widget. By having more than one collapsible Spry panel, you increase the amount of information available on your Web pages.

Instructions

1. Click "Start" in Windows and select "Dreamweaver CS3" from the menu.

2. Click "Open" and locate and click on the Web page in which you want to add collapsible panels.

3. Click "Insert" and choose "Spry" from the drop-down list of options.

4. Place your cursor where you want to create the panel in your Web page, and then click on the "Spry Collapsible Panel" icon at the far right of the "Insert" bar.

5. Click on the word "Tab" and type your tab name. Click on the word "Content" and replace it with your own text, images or other elements.

6. Repeat the insertion steps to add more than one collapsible panel to the same page.

References

• Dreamweaver CS4: Dynamic Development - Using Spry Collapsible Panels
• Layer's Magazine: Creating Collapsible Panels Wth Spry in Dreamweaver
• Adobe Labs: Working With the Collapsible Panel Widget
• JustSkins: Spry Collapsible Panels