Creating an Accordion with Spry Data

This page gives a couple of examples of how to generate an Accordion with Spry Data.

Example 1

In this example we are creating an Accordion that has a panel for each employee within the data set called dsEmployees. We start off by creating a spry:region div. We then insert the markup for an Accordion with one panel. We then place a spry:repeat attribute on the AccordionPanel div so that a panel gets created for each row in the data set:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>

...

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

...

<script language="JavaScript" type="text/javascript" src="../../includes/xpath.js"></script>
<script language="JavaScript" type="text/javascript" src="../../includes/SpryData.js"></script>
<script language="JavaScript" type="text/javascript" src="../../widgets/accordion/SpryAccordion.js"></script>

<script type="text/javascript">

var dsEmployees = new Spry.Data.XMLDataSet("../../data/employees-01.xml", "employees/employee");

</script>

...

<body>

...

<div id="example1Region" spry:region="dsEmployees">
	<div id="Acc1" class="Accordion" tabindex="0">
		<div spry:repeat="dsEmployees" class="AccordionPanel">
			<div class="AccordionPanelTab">{username}</div>
			<div class="AccordionPanelContent">{firstname} {lastname}</div>
		</div>
	</div>
<script type="text/javascript">
var a1 = new Spry.Widget.Accordion("Acc1");
</script>
</div>

...

</body>
</html>

The interesting thing to note about the code above is that the script block for the widget constructor is *inside* the spry:region. By placing the script block inside the region, it means that the constructor will get run anytime the markup in the region is regenerated, creating a new widget object for the new markup.

Here's a working version of the code above:

{username}

{firstname} {lastname}

Example 2

This example is almost identical to Example 1, except that it uses a spry:region observer which is triggered during the "onPostUpdate" event *after* the region regenerates its markup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>

...

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

...

<script language="JavaScript" type="text/javascript" src="../../includes/xpath.js"></script>
<script language="JavaScript" type="text/javascript" src="../../includes/SpryData.js"></script>
<script language="JavaScript" type="text/javascript" src="../../widgets/accordion/SpryAccordion.js"></script>

<script type="text/javascript">

var dsEmployees = new Spry.Data.XMLDataSet("../../data/employees-01.xml", "employees/employee");

var observer = { onPostUpdate: function(notifier, data) { var a2 = new Spry.Widget.Accordion("Acc2"); } };
Spry.Data.Region.addObserver("example2Region", observer);

</script>

...

<body>

...

<div id="example2Region" spry:region="dsEmployees">
	<div id="Acc2" class="Accordion" tabindex="0">
		<div spry:repeat="dsEmployees" class="AccordionPanel">
			<div class="AccordionPanelTab">{username}</div>
			<div class="AccordionPanelContent">{firstname} {lastname}</div>
		</div>
	</div>
</div>

...

</body>
</html>

Here's a working version of the code above:

{username}

{firstname} {lastname}