Collapsible Panel

Description

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.

Required Files

SpryCollapsiblePanel.js

SpryCollapsiblePanel.css

Reference File

SpryCollapsiblePanel.html

Sample Files

CollapsiblePanelSample.html

 

Structure

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>

Constructor

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>

Basic Constructor

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

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.

Collapsible Panel Methods

open

Opens the panel.

Format

Collapsible PanelName.open();

Example

 <a href="#" onclick="cp1.open(); return false;">Open</a> 

close

Closes the open panel.

Format

Collapsible PanelName.close();

Example

<a href="#" onclick="cp1.close(); return false;">Close</a>

Copyright © 2007. Adobe Systems Incorporated.
All rights reserved.