PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


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

22 November 2008 By Ninenik Narkdee
jquery accordion

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery accordion



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

<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






Tags:: jquery accordion






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


URL สำหรับอ้างอิง