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 widget behaviors (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).

**This sentence is a sample change for LiveDocs.**

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>