Spry collapsible panel with spry data

["darrenjpure"]

I have created a spry collapsible panel and wanted to put srpy data in it, to 
dynamically load. 

 i also want to hide the entire panel if no data is available.

 It will show the data, but the click to open/close does not work.

 here is the code.



 <script src="/SpryAssets/xpath.js" type="text/javascript"></script>
 <script src="/SpryAssets/SpryData.js" type="text/javascript"></script>
 <script src="/SpryAssets/SpryCollapsiblePanel.js" 
type="text/javascript"></script>
 <script type="text/javascript">
 <!--
 var ds1 = new Spry.Data.XMLDataSet("/spry/service_data.asp", 
"alerts/issue",{useCache:false,loadInterval:5000});
 //-->
 </script>
 <link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" 
type="text/css" />
 <div class="nav" id="nav">
   <div class="SpryHiddenRegion" id="servicealert" spry:region="ds1" 
spry:repeat="ds1">
   <div id="CollapsiblePanel1" class="CollapsiblePanel" >
     <div class="CollapsiblePanelTab" tabindex="0">
       <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>)</div>
   </div>
   </div>


 <script type="text/javascript">
 var SpryCollapsiblePanel1 = new 
Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
 </script>