สร้างเมนู Accordion อย่างง่ายแบบที่ 2 ด้วย jQuery

CSS Code

<style type="text/css">  
/* สร้าง css class ชื่อ iTopic สำหรับ หัวข้อเมนู */
.iTopic{
	font-size:12px;
	display:block;
	float:left;
	height:22px;
	font-weight:bold;
	color:#333;
	padding-left:25px;
	padding-bottom:3px;
	line-height:18px;
	cursor:pointer;
	width:400px;
	clear:both;
	border:1px solid #CCCCCC;
}
/* สร้าง css class ชื่อ iDetail สำหรับ รายละเอียด */
.iDetail{
	font-size:12px;
	display:none;
	clear:both;
	float:left;
	font-weight:normal;
	color:#333333;
	padding-left:25px;
	padding-bottom:10px;
	line-height:18px;
	background-color:#E9EFEF;
	width:400px;
}
</style>  

HTML Code

<div class="iMenu">
<span class="iTopic">หัวข้อทดสอบที่ 1</span>
<label class="iDetail">รายละเอียดหัวข้อทดสอบที่ 1 รายละเอียดหัวข้อทดสอบที่ 1 รายละเอียดหัวข้อทดสอบที่ 1
รายละเอียดหัวข้อทดสอบที่ 1 รายละเอียดหัวข้อทดสอบที่ 1 รายละเอียดหัวข้อทดสอบที่ 1</label>
<span class="iTopic">หัวข้อทดสอบที่ 2</span>
<label class="iDetail">รายละเอียดหัวข้อทดสอบที่ 2 รายละเอียดหัวข้อทดสอบที่ 2 รายละเอียดหัวข้อทดสอบที่ 2
รายละเอียดหัวข้อทดสอบที่ 2 รายละเอียดหัวข้อทดสอบที่ 2 รายละเอียดหัวข้อทดสอบที่ 2</label>
<span class="iTopic">หัวข้อทดสอบท3</span>
<label class="iDetail">รายละเอียดหัวข้อทดสอบที่ 3 รายละเอียดหัวข้อทดสอบที่ 3 รายละเอียดหัวข้อทดสอบที่ 3
รายละเอียดหัวข้อทดสอบที่ 3 รายละเอียดหัวข้อทดสอบที่ 3 รายละเอียดหัวข้อทดสอบที่ 3</label>
<span class="iTopic">หัวข้อทดสอบที่ 4</span>
<label class="iDetail">รายละเอียดหัวข้อทดสอบที่ 4 รายละเอียดหัวข้อทดสอบที่ 4 รายละเอียดหัวข้อทดสอบที่ 4
รายละเอียดหัวข้อทดสอบที่ 4 รายละเอียดหัวข้อทดสอบที่ 4 รายละเอียดหัวข้อทดสอบที่ 4</label>
</div>
<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">   
$(function(){   
    $("span.iTopic").click(function(){   
			$(this).next("label.iDetail").slideToggle("fast");
			$(this).next("label.iDetail").siblings("label").slideUp('fast');
    });   
});   
</script> 

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