Spry collapsible panel with spry data

How else can I achieve this effect? Using different technologies?

Is anyone else able to help with this? Is it actually possible?

I have made some progress, thanks, however im still getting some odd formatting issues, for example, the 1st panel shows with different design to the rest of the panels.

this is my code;
<div id="region" spry:region="ds1">
<div id="repeat" spry:repeat="ds1">
<div id="CollapsiblePanel{ds_RowID}" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="{ds1::ds_RowID}"> <h1>{title} - last amended {amended}</h1></div>
<div class="CollapsiblePanelContent"><strong>{message}</strong> Added by <strong>{owner}</strong> on <strong>{added} </strong>(REF: <strong>{id}</strong>) <a href="/service/index.asp" target="_self">View full details</a></div>
</div>
<script type="text/javascript">
<!--
var CollapsiblePanel{ds_RowID} = new Spry.Widget.CollapsiblePanel("CollapsiblePanel{ds_RowID}");
//-->
</script>

As you can see, I am inserting {ds_RowID} in the variable name, in order for the panels to operate independantly, however have I coded it correctly?

http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample2.html

Thats an example of doing the accordion widget with Spry Data, apply the same principles for the collapsible panel.

Is this actually possible?

I can make the panel, I can put spry data in it, it just wont open/collapse when its on the webpage.