Spry * Insert the Collapsible Panel widget

Locate the SpryCollapsiblePanel.js file and add it to your web site. You can find the SpryCollapsiblePanel.js file in the widgets/collapsiblepanel directory, located in the Spry directory that you downloaded from Adobe Labs. For more information, see Prepare your files.

For example, create a folder called SpryAssets in the root folder of your web site, and move the SpryCollapsiblePanel.js file to it. The SpryCollapsiblePanel.js file contains all of the information necessary for making the Collapsible Panel widget interactive.

Locate the SpryCollapsiblePanel.css file and add it to your web site. You might choose to add it to the main directory, or to a CSS directory if you have one.

Open the web page to add the Collapsible Panel widget to and link the SpryCollapsiblePanel.js file to the page by inserting the following script tag in the page’s head tag:

<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>

Make sure that the file path to the SpryCollapsiblePanel.js file is correct. This path varies depending on where you’ve placed the file in your web site.

Link the SpryCollapsiblePanel.css file to your web page by inserting the following link tag in the page’s head tag:

<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />

Make sure that the file path to the SpryCollapsiblePanel.css file is correct. This path varies depending on where you’ve placed the file in your web site.

To add the collapsible panel to your web page, insert the following div tag where you want the collapsible panel to appear on the page:

<div id="CollapsiblePanel1" class="CollapsiblePanel">
</div>

To add a tab to the collapsible panel, insert a div class="CollapsiblePanelTab" tag inside the div class="CollapsiblePanel" tag, as follows:

<div id="CollapsiblePanel1" class="CollapsiblePanel">
	<div class="CollapsiblePanelTab">Tab</div>
</div>

To add a content area to the panel, insert a div class="CollapsiblePanelContent" tag inside the div class="CollapsiblePanel" tag, as follows:

<div class="AccordionPanel">
	<div class="CollapsiblePanelTab">Tab</div>
	<div class="CollapsiblePanelContent">Content</div>
</div>

Insert the content between the opening and closing CollapsiblePanelContent tags (For example, Content, as in the preceding example). The content can be any valid HTML code, including HTML form elements.

To initialize the Spry collapsible panel object, insert the following script block after the HTML code for the Collapsible Panel widget:

<div id="CollapsiblePanel1" class="CollapsiblePanel">
. . .
</div>
<script type="text/javascript">
	var cp1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
</script>

The new JavaScript operator initializes the Collapsible Panel widget object, and transforms the div content with the ID of CollapsiblePanel1 from static HTML code into an interactive collapsible panel object. The Spry.Widget.CollapsiblePanel method is a constructor in the Spry framework that creates collapsible panel objects. The information necessary to initialize the object is contained in the SpryCollapsiblePanel.js JavaScript library that you linked to at the beginning of this procedure.

Make sure that the ID of the collapsible panel’s div tag matches the ID parameter you specified in the Spry.Widgets.CollapsiblePanel method. Make sure that the JavaScript call comes after the HTML code for the widget.

Save the page.

The complete code looks as follows:

<head>
...
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
</head>
<body>
	<div id="CollapsiblePanel1" class="CollapsiblePanel">
		<div class="CollapsiblePanelTab">Tab</div>
		<div class="CollapsiblePanelContent">Content</div>
	</div>
<script type="text/javascript">
	var cp1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
</script>
</body>