ایجاد پنل جمع شونده با جاوا اسکریپت و فریم ورک Spry

Spry.Widget.CollapsiblePanel.prototype.onTabClick = function(a)
{
	if (this.isOpen())
		this.close();
	else
	{
		CollapsiblePanel1.close();
		CollapsiblePanel2.close();
		CollapsiblePanel3.close();
		CollapsiblePanel4.close();
		CollapsiblePanel5.close();
		CollapsiblePanel6.close();
		CollapsiblePanel7.close();
		CollapsiblePanel8.close();
		this.open();
	}

	this.focus();
	return this.stopPropagation(a);
};

<script type="text/javascript">
function changeIt(value, num){
	//بستن تمام باکس ها
	for(var i = 1; i <= num; i++){
		document.getElementById('box-' + i).style.display = 'none';
	}
	//نمایش انتخاب شده
	document.getElementById('box-' + value).style.display = 'block';	
}
</script>
<select onchange="changeIt(this.value, 3);">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div id="box-1">متن 1</div>
<div id="box-2">متن 2</div>
<div id="box-3">متن 3</div>

<?php
   if (mysql_num_rows($man) > 0)
	    {
	    	$i=1 ;
		   	while ($row_manage = mysql_fetch_array($man))
		    {
		    	$matn .= '<div class="div"> 
				<div class="title_s">
					<div class="date_sms"> 1392/05/27 </div>
					<div class="title_sms">'.$row_manage['subject'].' </div>
				</div>
				<div class="line"> </div>
				<br />
				<br />
				'.$row_manage['description'].'
				<div id="CollapsiblePanel'. $i .'" class="div2">
					<a class="CollapsiblePanelTab">ادامه مطلب</a>  
					  <div class="div1">
					  <br />
					  <br />
					'.$row_manage['con_description'].'
					 </div>
				</div>
			</div>';
			if($i <= 1){
				$matn .= '<script type="text/javascript">';
			}
			
			$matn .= 'var CollapsiblePanel'.$i.' = new Spry.Widget.CollapsiblePanel("CollapsiblePanel'.$i.'",{contentIsOpen:false, openClass:"CollapsiblePanelClose"});';
			
			if($i == mysql_num_rows($man)){
		    			$matn .= '</script>';
			}
			
			$i++;  	
		    }
	    }
?>