The Spry Collapsible Panel is a disclosure widget that consists of a panel, with a clickable tab and a content panel. Clicking on a tab will reveal the contents of that panel.
The widget structure is as follows:
<widget container> <tab container>
<content container>
</widget container>
The Collapsible Panel has one panel only.
The markup used in this structure can be most any HTML, as long as it follows the rules for nesting.
Using the provided files, the default mark up is:
<div class="CollapsiblePanel" id="cp1">
<div class="CollapsiblePanelTab">Panel 1</div>
<div class="CollapsiblePanelContent">
Content for Panel 1 goes here.</div>
</div><script type="text/javascript"> var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("cp1"); </script>
Widget Constructors are small pieces of javascript that activate the markup into the working widget. These scripts must come AFTER the markup on the page, since the markup needs to exist before the constructor fires.
<script type="text/javascript"> var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("cp1"); </script>
A basic constructor specifies the name of the widget and identifies the ID of the main markup container. The name of the widget is used to identify the widget for functions and methods.
<script type="text/javascript"> var widgetname = new Spry.Widget.CollapsiblePanel("id of widget container"); </script>
Constructor options allow users to specify certain attributes of the widget.
Constructor options follow the ID parameter, wrapped in curly braces {}. Options are name:value pairs, separated by a colon (:).
<script type="text/javascript">
var widgetname = new Spry.Widget.CollapsiblePanel("id of widget container",{option1:value, option2:value, option3:"value"});
</script>
Option | Values | Default | Description |
---|---|---|---|
closedClass | CSS class name | null | This class will be applied to the content panel as it is closing. |
contentIsOpen | true or false | true | Determines whether the panel is open or closed when the page loads. Default is open. |
duration | number of milliseconds | 500 milliseconds | Defines how long it will take to open or close the panel. |
enableAnimation | true or false | true | By default, the panel smoothly opens and closes. Setting enableAnimation:false will cause the panel to open and close instantly, with no animation. |
focusedClass | CSS class name | null | This class will be applied to the accordion when it had focus in the browser. This will trump the .CollapsiblePanelFocused defined in 'SpryCollapsiblePanel.css'. The .CollapsiblePanelFocused class can also be edited directly if that is easier. |
hoverClass | CSS class name | null | This class will be applied when hovering over the accordion tab. This will trump the .CollapsiblePanelTabHover defined in 'SpryCollapsiblePanel.css'. The .CollapsiblePanelTabHover class can also be edited directly if that is easier. |
openClass | CSS class name | null | This class we will applied to the content panel when it is open. This will trump the .CollapsiblePanelOpen defined in 'SpryCollapsiblePanel.css'. The .CollapsiblePanelOpen class can also be edited directly if that is easier. |
enableKeyboardNavigation | true or false | true | By default, the Open and Close arrow keys will show/hide the panel. Setting this option to false will disable that ability. |
openPanelKeyCode | This option allows the user to assign a specific key to close the collapsible panel having focus. Keyboard code numbers are described here. The value of the option is the keyboard code number. | number | 40 (Down Arrow key code) |
closePanelKeyCode | This option allows the user to assign a specific key to open the collapsible panel having focus. Keyboard code numbers are described here. The value of the option is the keyboard code number. | number | 38 (Up Arrow key code) |
<script type="text/javascript"> var ac1 = new Spry.Widget.CollapsiblePanel("myCollapsiblePanel",{contentIsOpen:false, duration:200}); </script>
Recall that javascript is case sensitive.
Opens the panel.
Collapsible PanelName.open();
<a href="#" onclick="cp1.open(); return false;">Open</a>
Closes the open panel.
Collapsible PanelName.close();
<a href="#" onclick="cp1.close(); return false;">Close</a>
Copyright © 2007. Adobe Systems Incorporated.
All rights reserved.