Spry * Insert the Accordion widget

Locate the SpryAccordion.js file and add it to your web site. You can find the SpryAccordion.js file in the widgets/accordion 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 SpryAccordion.js file to it. The SpryAccordion.js file contains all of the information necessary for making the Accordion widget interactive.

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

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

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

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

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

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

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

Add the accordion to your web page by inserting the following div tag where you want the accordion to appear on the page:

<div id="Accordion1" class="Accordion">
</div>

Add panels to the accordion by inserting <div class="AccordionPanel"> tags inside the <div id="Accordion1"...> tag, as follows:

<div id="Accordion1" class="Accordion">
	<div class="AccordionPanel">
	</div>
	<div class="AccordionPanel">
	</div>
</div>

The preceding code adds two panels to the accordion. You can add unlimited panels.

To add tabs to the panels, insert div class="AccordionPanelTab" tags inside each div class="AccordionPanel" tag, as follows:

<div class="AccordionPanel">
	<div class="AccordionPanelTab">Panel 1 Title</div>
</div>

To add a content area to the panels, insert div class="AccordionPanelContent" tags in each div class="AccordionPanel" tag, as follows:

<div class="AccordionPanel">
	<div class="AccordionPanelTab">Panel 1 Title</div>
	<div class="AccordionPanelContent">Panel 1 Content</div>
</div>

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

To initialize the Spry accordion object, insert the following script block after the HTML code for the Accordion widget:

<div id="Accordion1" class="Accordion">
. . .
</div>
<script type="text/javascript">
	var Acc1 = new Spry.Widget.Accordion("Accordion1");
</script>

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

Make sure that the ID of the accordion’s div tag matches the ID parameter you specified in the Spry.Widgets.Accordion 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/SpryAccordion.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
</head>
<body>
	<div id="Accordion1" class="Accordion">
		<div class="AccordionPanel">
			<div class="AccordionPanelTab">Panel 1</div>
			<div class="AccordionPanelContent">
				Panel 1 Content<br/>
				Panel 1 Content<br/>
				Panel 1 Content<br/>
			</div>
		</div>
		<div class="AccordionPanel">
			<div class="AccordionPanelTab">Panel 2</div>
			<div class="AccordionPanelContent">
				Panel 2 Content<br/>
				Panel 2 Content<br/>
				Panel 2 Content<br/>
			</div>
		</div>
		<div class="AccordionPanel">
			<div class="AccordionPanelTab">Panel 3</div>
			<div class="AccordionPanelContent">
				Panel 3 Content<br/>
				Panel 3 Content<br/>
				Panel 3 Content<br/>
			</div>
		</div>
		<div class="AccordionPanel">
			<div class="AccordionPanelTab">Panel 4</div>
			<div class="AccordionPanelContent">
				Panel 4 Content<br/>
				Panel 4 Content<br/>
				Panel 4 Content<br/>
			</div>
		</div>
	</div>
<script type="text/javascript">
	var Acc1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>