Customize the Panel
At the creation or insertion of a collapsible panel, the Properties section has two menus—Display and Default state. The Display can be open or closed. Open means it is visible in the Design view while you work. Leave this open so you can what you are doing. The Default state has the same two options. For this, choose “Close" since open would keep the contents visible on a browser all the time, which defeats the purpose of a collapsible panel. The Properties section also has a checkbox to enable animation, but that is irrelevant for this introductory explanation.
Editing the other properties of these panels means using the CSS Styles panel. You can get to these by clicking on “Window," CSS Styles" and scrolling down to the styles for the SpryCollapsiblePanel.css section. You may need to expand this to see all the options. The most important changes to make are the text and background colors so they fit with your Web page design. In this example, with a sort of blue/cyan (#00FFFF) background, the background of the content is set to a yellow shade. The “CollapsiblePanelContent properties control these settings. When first viewed, the only styles are margin and padding. By clicking on the “Add Property" button and scanning down the drop down list to choose “background-color," there will then be another drop down list to choose a color, in this case, #00FFFF. The text in the image now is bold, selected in the same way by adding the “font-weight" CSS style and setting it to Bold. Many more styles are listed giving endless possibilities for tinkering with things like fonts, margins, padding, alignment, background images and positions. This example makes only a few more changes. The first is to set the background color of the CollapsiblePanelTab itself to black (#000000) and the color of the text to white (#FFFFFF). For easier viewing in an image, the font-size settings are 24 pt, although it is unlikely you would do this on a real Web page. When finished you must upload not only the new Web page but all the modified CSS styles listed under “Spry Assets" in the file list on your computer.
Using these panels, besides enhancing your site, demonstrates professional web design and may encourage return visitors.