ซ่อนและแสดงเนื้อหาแบบหีบเพลง (accordion) ด้วย jquery อย่างง่าย

โดยตอนแรกแสดงเฉพาะหัวข้อ เมื่อคลิกที่หัวข้อนั้น ก็จะัแสดงรายละเอียด ของหัวข้อนั้น

<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function(){
	$("ul#simple_acc >  li").click(function(){
			$(this).children("ul").slideToggle();		
			// หากต้องการให้แสดงแบบไม่ต้องเปิดค้างให้เอา comment 
			// บรรทัดข้างต่อไปออก
		//	$(this).siblings().children("ul").slideUp();	
	});
});
</script>

CSS และ HTML Code

<style type="text/css">
ul#simple_acc,
ul#simple_acc ul,
ul#simple_acc  li,{
	padding:0px;margin:0px;
}
ul#simple_acc >  li{
	border:1px #CCFF66 solid;
	background-color:#99CC33;
	color:#FFFFFF;
	cursor:pointer;
}
ul#simple_acc >  li > ul{
	border:1px #FFCC99 solid;
	background-color:#FFFFCC;
	color:#FF6633;
	display:none;
}
</style>
<ul id="simple_acc">
	<li>หัวข้อที่ 1
		<ul>
			<li>รายละเอียดหัวข้อที่ 1 รายละเอียดหัวข้อที่ 1 รายละเอียดหัวข้อที่ 1<br />
รายละเอียดหัวข้อที่ 1รายละเอียดหัวข้อที่ 1รายละเอียดหัวข้อที่ 1 รายละเอียดหัวข้อที่ 1
รายละเอียดหัวข้อที่ 1 รายละเอียดหัวข้อที่ 1 รายละเอียดหัวข้อที่ 1</li>
		</ul>
	</li>
	<li>หัวข้อที่ 2
		<ul>
			<li>รายละเอียดหัวข้อที่ 2 รายละเอียดหัวข้อที่ 2 รายละเอียดหัวข้อที่ 2<br />
รายละเอียดหัวข้อที่ 2รายละเอียดหัวข้อที่ 2รายละเอียดหัวข้อที่ 2 รายละเอียดหัวข้อที่ 2
รายละเอียดหัวข้อที่ 2 รายละเอียดหัวข้อที่ 2 รายละเอียดหัวข้อที่ 2</li>
		</ul>
	</li>
	<li>หัวข้อที่ 3
		<ul>
			<li>รายละเอียดหัวข้อที่ 3 รายละเอียดหัวข้อที่ 3 รายละเอียดหัวข้อที่ 3<br />
รายละเอียดหัวข้อที่ 3รายละเอียดหัวข้อที่ 3รายละเอียดหัวข้อที่ 3 รายละเอียดหัวข้อที่ 3
รายละเอียดหัวข้อที่ 3 รายละเอียดหัวข้อที่ 3 รายละเอียดหัวข้อที่ 3</li>
		</ul>
	</li>		
</ul>

ตัวอย่างผลลัพธ์

• หัวข้อที่ 1
  • รายละเอียดหัวข้อที่ 1 รายละเอียดหัวข้อที่ 1 รายละเอียดหัวข้อที่ 1
    รายละเอียดหัวข้อที่ 1รายละเอียดหัวข้อที่ 1รายละเอียดหัวข้อที่ 1 รายละเอียดหัวข้อที่ 1 รายละเอียดหัวข้อที่ 1 รายละเอียดหัวข้อที่ 1 รายละเอียดหัวข้อที่ 1
• หัวข้อที่ 2
  • รายละเอียดหัวข้อที่ 2 รายละเอียดหัวข้อที่ 2 รายละเอียดหัวข้อที่ 2
    รายละเอียดหัวข้อที่ 2รายละเอียดหัวข้อที่ 2รายละเอียดหัวข้อที่ 2 รายละเอียดหัวข้อที่ 2 รายละเอียดหัวข้อที่ 2 รายละเอียดหัวข้อที่ 2 รายละเอียดหัวข้อที่ 2
• หัวข้อที่ 3
  • รายละเอียดหัวข้อที่ 3 รายละเอียดหัวข้อที่ 3 รายละเอียดหัวข้อที่ 3
    รายละเอียดหัวข้อที่ 3รายละเอียดหัวข้อที่ 3รายละเอียดหัวข้อที่ 3 รายละเอียดหัวข้อที่ 3 รายละเอียดหัวข้อที่ 3 รายละเอียดหัวข้อที่ 3 รายละเอียดหัวข้อที่ 3