Spry

Customize the Collapsible Panel widget

The SpryCollapsiblePanel.css file provides the default styling for the Collapsible Panel widget. You can, however, easily customize the widget by changing the appropriate CSS rule. The CSS rules in the SpryCollapsiblePanel.css file use the same class names as the related elements in the collapsible panel’s HTML code, so it’s easy for you to know which CSS rules correspond to the different sections of the Collapsible Panel widget. Additionally, the SpryCollapsiblePanel.css file contains class names for behaviors that are related to the widget (for example, hovering and clicking behaviors).

The SpryCollapsiblePanel.css file should already be included in your website before you start customizing. For more information, see Prepare your files.

Note: Internet Explorer up to and including version 6 does not support Sibling and child contextual selectors (for example, .CollapsiblePanel + .CollapsiblePanel or .CollapsiblePanel > .CollapsiblePanel).

Style a CollapsiblePanel widget (general instructions)

Set properties for the entire Collapsible Panel widget container, or set properties for the components of the widget individually.

1. Open the SpryCollapsiblePanel.css file.
2. Locate the CSS rule for the part of the collapsible panel to change. For example, to change the background color of the collapsible panel’s tab, edit the CollapsiblePanelTab rule in the SpryCollapsiblePanel.css file.
3. Make your changes to the CSS rule and save the file.

You can replace style-related class names in the SpryCollapsiblePanel.css file and HTML code with class names of your own. Doing so does not affect the functionality of the widget.

The SpryCollapsiblePanel.css file contains extensive comments, explaining the code and the purpose for certain rules. For further information, see the comments in the file.

Style Collapsible Panel widget text

Set properties for the entire Collapsible Panel widget container, or set properties for the components of the widget individually.

 To change the text format of a Collapsible Panel widget, use the following table to locate the appropriate CSS rule, and then add your own text styling properties and values.

Style to change	Relevant CSS rule	Example of properties and values to add or change
Text in the entire collapsible panel	.CollapsiblePanel	font: Arial; font-size:medium;
Text in panel tab only	.CollapsiblePanelTab	font: bold 0.7em sans-serif; (This is the default value.)
Text in content panel only	.CollapsiblePanelContent	font: Arial; font-size:medium;

Change Collapsible Panel widget background colors

 Use the following table to locate the appropriate CSS rule, and then add or change background color properties and values.

Color to change	Relevant CSS rule	Example of property and value to add or change
Background color of panel tab	.CollapsiblePanelTab	background-color: #DDD; (This is the default value.)
Background color of content panel	.CollapsiblePanelContent	background-color: #DDD;
Background color of tab when panel is open	.CollapsiblePanelOpen .CollapsiblePanelTab	background-color: #EEE; (This is the default value.)
Background color of open panel tab when the mouse pointer moves over it	.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover	background-color: #CCC; (This is the default value.)

Constrain the width of a collapsible panel

By default, the Collapsible Panel widget expands to fill available space. To constrain the width of a Collapsible Panel widget, set a width property for the collapsible panel container.

1. Locate the CollapsiblePanel CSS rule in the SpryCollapsiblePanel.css file. This rule defines properties for the main container element of the Collapsible Panel widget.
2. Add a width property and value to the rule, for example width: 300px;.

Change collapsible panel height

To set the height of a collapsible panel, add a height property to the CollapsiblePanelContent rule or the CollapsiblePanel rule.

 In the SpryCollapsiblePanel.css file, add a height property and value to the CollapsiblePanelContent rule, for example, height: 300px;.

Note: Setting the height of the CollapsiblePanel rule sets the height of the entire widget, independent of the content panel size.

Change collapsible panel behaviors

The collapsible panel widget includes a few predefined behaviors. These behaviors consist of changing CSS classes when a particular event occurs. For example, when a mouse pointer hovers over a collapsible panel tab, Spry applies the CollapsiblePanelTabHover class to the widget. (This behavior is similar to a:hover for links.) The behaviors are blank by default; to change them, add properties and values to the rules.

1. Open the SpryCollapsiblePanel.css file and locate the CSS rule for the collapsible panel behavior to change. The Collapsible Panel widget includes four built-in rules for behaviors.

   Behavior	Description
   .CollapsiblePanelTabHover	Spry adds this class to the widget's tab element whenever the mouse enters hovers over it. The class is automatically removed when the mouse leaves the tab.
   .CollapsiblePanelOpen	Spry adds this class to the widget's top-level element when the panel’s content area is visible.
   .CollapsiblePanelClosed	Spry adds this class to the widget's top-level element when the panel's content area is closed
   .CollapsiblePanelFocused	Spry adds this class to the widget's top-level element when the widget has keyboard focus.

   For examples, see the collapsible panel sample file located in the samples directory of the Spry directory that you downloaded from Adobe Labs. For more information, see Prepare your files.

2. Add CSS rules for any of the behaviors you want to enable.

Note: You cannot replace behavior-related class names in the SpryCollapsiblePanel.css file with class names of your own because the behaviors are hard coded as part of the Spry framework. To override the default class with your class name, send the new values as arguments to the collapsible panel constructor:

<script type="text/javascript">
	var CP2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", { hoverClass: "hover", openClass: "open", closedClass: "closed", focusedClass: "focused" });
</script>

Turn off panel animation

By default, a collapsible panel uses animation to smoothly open and close.

 To turn off animation so that the panel instantly opens and closes, send an argument in the collapsible panel constructor, as follows:

<script type="text/javascript">
	var CP5 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel5", { enableAnimation: false });
</script>

Set panel animation timing

You can change the time it takes for a panel to open. Set the time in milliseconds (1000 = 1 second). By default, Spry uses 500 milliseconds.

 Add the duration option to the constructor:

<script type="text/javascript">
	var CP9 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel9", { duration: 100 });
</script>

Comments

Comments are no longer accepted for Spry 1.4. Spry 1.6 is the current version. To discuss Spry 1.4, please use the Adobe forum.

Comments

The "duration" option is very limited in how fast you can get the widget to open. Very low values don't seem to have much of an effect.

As an alternative you can also set the animation timing in terms of frames-per-second by adding an "fps" option instead of "duration". Using the fps option you can get the widget to open much faster. Setting fps higher results in a faster animation, and setting it lower makes the animation slower.

Example for a very fast animation (80 frames-per-second):

<script type="text/javascript">
var CP9 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel9", { fps: 80 });
</script>

I'm using IE 7 and I can't seem to get the animation speed for Collapsible Panels to change regardless of setting duration, fps, or steps individually or in combination.

I did build a test page with the Accordian widget on it in addition to the Collapsible Panel widget. But the Accordians behave as I expect - the lower the value for duration, the faster the animation.

Here's the code at the bottom of the page that I'm playing with:

var Accordion1 = new Spry.Widget.Accordion("Accordion1", {duration: 150});
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {duration: 150});
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen: false, fps: 140, duration: 150, steps: 2});

Help! How do I speed up the Collapsible Panel animation?

Thanks.

Hi
Has anyone found any indication that the Collapsible Panel widget
supports multiple rows? I have a list of things I'd like to stack together, but I
can't find a way to add multiple rows.

Thanks.

See if the Collapsible Panel Group will do what you need:
http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSample.html

Don

Thank you for the link. This is, in fact, the function I am looking for
exactly. However, when I tried to replicate the effect just for practice
within DWCS3, it wasn't allowing me to alter the CSS at all. When I
previewed it in Safari and Firefox, nothing. Again, this is when I copied/
pasted the source into a new blank doc in DW.
Is it because the Collapsible Panel Group is still in development, hence
its appearance in the Adobe Labs pages?