echo "<h2>Demo 1:</h2>



<div id='hc1' class='haccordion'>

	<ul>



	<li>

		<div class='hpanel'>

		<img src='http://img502.imageshack.us/img502/746/thailand.jpg' style='float:left; padding-right:8px; width:200px; height:148px' />The Andaman Sea is regarded as Thailand's most precious natural resource as it hosts the most popular and luxurious resorts in Asia.

		</div>

	</li>



	<li>

		<div class='hpanel'>

		<img src='http://img264.imageshack.us/img264/7199/japan.jpg' style='float:left; padding-right:8px; width:200px; height:148px' />Japan is a constitutional monarchy where the power of the Emperor is very limited.

		</div>

	</li>



	<li>

		<div class='hpanel'>

		<img src='http://img101.imageshack.us/img101/516/mayai.jpg' style='float:left; padding-right:8px; width:200px; height:148px' />Malaysia is a South Asian country rich in natural resources in areas such as agriculture, forestry and minerals.

		</div>

	</li>



	<li>

		<div class='hpanel'>

		<img src='http://img194.imageshack.us/img194/9553/camam.jpg' style='float:left; padding-right:8px; width:200px; height:148px' />Agriculture has long been the most important sector of the Cambodian economy.

		</div>

	</li>



	<li>

		<div class='hpanel'>

		<img src='http://img408.imageshack.us/img408/5751/langkawi.jpg' style='float:left; padding-right:8px; width:200px; height:148px' />Langkawi is particularly known for its beaches which are among the best in Malaysia.

		</div>

	</li>



	</ul>

</div>



<p style='clear:left'><a href=\"javascript:haccordion.expandli('hc1', 0)\">Expand 1 Panel</a> | <a href=\"javascript:haccordion.expandli('hc1', 1)\">Expand 2nd Panel</a> | <a href=\"javascript:haccordion.expandli('hc1', 2)\">Expand 3rd Panel</a> | <a href=\"javascript:haccordion.expandli('hc1', 3)\">Expand 4th Panel</a> | <a href=\"javascript:haccordion.expandli('hc1', 4)\">Expand 5th Panel</a></p>





<br />







<h2>Demo 2:</h2>





<div id='hc2' class='haccordion'>

	<ul>



	<li style='border-right-width:0'>

		<div class='hpanel' style='padding:10px; width:250px'>

		This accordion content has a custom full width of 250px. Note where the two inline CSS are added within the markup.

		</div>

	</li>



	<li style='border-right-width:0'>

		<div class='hpanel' style='padding:10px; width:180px'>

		This accordion content has a custom full width of 180px. Note where the two inline CSS are added within the markup.

		</div>

	</li>



	<li style='border-right-width:0'>

		<div class='hpanel' style='padding:10px; width:350px'>

		This accordion content has a custom full width of 350px. Note where the two inline CSS are added within the markup.

		</div>

	</li>



	<li>

		<div class='hpanel' style='padding:10px; width:550px'>

		This accordion content has a custom full width of 550px. Note where the two inline CSS are added within the markup.

		</div>

	</li>



	</ul>

</div>";