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

22 November 2008

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

<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







บทความในหมวดที่่น่าสนใจ อื่นๆ jQuery Learning

17 Nov 09 พิมพ์ข้อมูลใน textbox เพื่อ เพิ่มรายการใน listbox ด้วย jQuery อ่าน 4605 27 Aug 10 เทคนิค jQuery สร้าง preloading page หรือ loading image ก่อนแสดงหน้าเว็บ อ่าน 4602 21 Jul 10 เทคนิค การเพิ่ม ลบ แถว ในตาราง รายการข้อมูล ด้วย jQuery อย่างง่าย อ่าน 4562 18 Oct 08 การประยุกต์ใช้ฟังก์ขัน after() กับ text input อ่าน 4551 19 Feb 09 สร้างกล่อง alert ข้อความเฉพาะตัว ด้วย jQuery และ CSS อย่างง่าย อ่าน 4510 30 Dec 08 การใช้งาน ajax ใน jQuery อย่างง่าย อ่าน 4480 24 Feb 10 เทคนิค สร้าง effect add to cart ด้วย jQuery อย่างง่าย อ่าน 4467 19 Apr 10 สอน jQuery เพิ่มรูปภาพ ให้ตัวเลือก ใน listbox อ่าน 4467 15 Feb 09 สร้างเมนู Accordion อย่างง่ายแบบที่ 2 ด้วย jQuery อ่าน 4420 25 Sep 08 การกำหนด selectors ด้วย jQuery เกี่ยวกับ form อ่าน 4329 16 Aug 09 jQuery UI คือ อะไร อ่าน 4303 04 Nov 08 การจำกัดจำนวนตัวอักษร ใน textarea ด้วย jquery อ่าน 4238 25 Sep 08 jquery สคริปแรกของคุณ อ่าน 4175 25 Sep 08 การกำหนด Selectors ด้วย jquery แบบ Basic อ่าน 4171 28 Oct 09 สร้าง Swap Banner แบนเนอร์แบบสลับอัตโนมัติ ด้วย jQuery อย่างง่าย อ่าน 4170

บทความคนเข้าอ่านวันนี้

25 Sep 08 ใช้ PHP สร้าง Javascript อย่างง่าย อ่าน 4163 19 Jan 11 อักขระคั่น (Delimiters) ในการใช้งาน Regular Expressions ของ PHP อ่าน 1039 10 Sep 10 ค้นหา พิกัด ค่า latitude และ longitude ใน Google Map จากฃื่อสถานที่ อ่าน 5610 27 Oct 10 cookie กับการประยุกต์ ใช้งาน เปลี่ยน background พื้นหลัง ด้วย jQuery และ php อ่าน 1472 05 Nov 08 CSS สร้างเมนูแนวตั้ง 2 ชั้นโดยไม่ใช้ javascript และตาราง table อ่าน 9223 12 May 10 แนวทาง การดึงข้อมูล แบบ real time ด้วย ajax ใน jQuery อ่าน 8806 12 Sep 10 จัดรูปแบบ NavigationControlOptions ใน Google Map อ่าน 1613 25 Mar 11 สร้างรูปแบบ วันที่ คล้าย วันที่ใน facebook comment ด้วย php อย่างง่าย อ่าน 2684 11 Jan 12 รู้จัก และใช้งาน DATEDIFF() ใน mysql ฟังก์ชัน เทียบช่วงเวลาที่เหลือ อ่าน 357 23 Nov 08 สร้างเมนูแท็บ Tab menu ด้วย jQuery + CSS อย่างง่าย อ่าน 24539 17 Jan 11 เทคนิค วิธี การแสดงข้อมูล ด้วยเงื่อนไข วันที่ date ใน mysql อ่าน 3086 25 Sep 08 การกำหนด selectors ด้วย jQuery เกี่ยวกับ form อ่าน 4329 25 Sep 08 การใช้งาน CSS ศึกษาิวิธีการนำ CSS ไปใช้กับ HTML อ่าน 6801 17 Nov 08 ตรวจสอบฟอร์ม form ก่อน submit ด้วย jquery อ่าน 9262 25 Sep 08 มารู้จัก effect ของ jquery อย่างง่าย ตอนที่ 1 อ่าน 6064 02 Jun 09 แก้ปัญหา การดึงข้อมูล จากฐานข้อมูล เมื่อเปลี่ยน charset ใน แท็ก meta อ่าน 3360 30 Oct 10 การเลื่อน jQuery UI tab อัตโนมัติ ตามเวลาที่กำหนด อ่าน 5083 25 Oct 08 สร้างฟังก์ชันการหา whois เบื้องต้นด้วย php อย่างง่าย อ่าน 1417 07 Sep 11 นาฬิกาเวลา จาก server อย่างง่าย อ่าน 862 06 Nov 09 สร้าง swap แบนเนอร์ effect แบบ fade ด้วย jQuery อย่างง่าย อ่าน 4639
จำนวนผู้เยี่ยมชม 777887
คน 2012 © Copyright ninenik.com. All rights reserved.