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

http://webgoo.ir/example/javascript/SpryAssets/SpryCollapsiblePanel.js

http://webgoo.ir/example/javascript/SpryAssets/SpryCollapsiblePanel.css

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

<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1",{contentIsOpen:false, openClass:"CollapsiblePanelClose"});
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2");
</script>

http://webgoo.ir/example/javascript/SpryAssets/SpryCollapsiblePanel.css

<script type="text/javascript">
if(document.addEventListener){
	document.addEventListener('contextmenu', function(e){
		document.write('کد منوی شما در حالت راست کلیک');
		e.preventDefault();
	}, false);
}
else{
	document.attachEvent('oncontextmenu', function(){
		document.write('کد منوی شما در حالت راست کلیک');
		window.event.returnValue = false;
	});
}
</script>

<?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++;  	
		    }
	    }
?>

<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>