ถ้าจะใช้วิธีแบบในตัวอย่างนี้ปรับเปน radio button ทำยังไงค่ะ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ถ้าจะใช้วิธีแบบในตัวอย่างนี้ปรับเปน radio button ทำยังไงค่ะ

ถ้าจะใช้วิธีแบบในตัวอย่างนี้ปรับเปน radio button ทำยังไงค่ะ

https://www.ninenik.com/ซ่อนและแสดงเนื้อหาแบบหีบเพลง_(accordion)_ด้วย_jquery_อย่างง่าย-154.html

จากตัวอย่างนี้ค่ะ ถ้าจะปรับใช้กับ radio button ทำยังไงค่ะ

ถ้าคลิกแล้วให้แสดงเหมือนในตัวอย่างอ่ะค่ะ

Zippy 16-02-2011 22:02:33

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

ลองเอาแนวทางจากตัวอย่างต่อไปนี้ ไปประยุกต์ดู

ตัวอย่าง

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

โค้ดตัวอย่าง

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>radio accordion</title>
<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>  
</head>

<body>


<div class="iMenu">
<span class="iTopic">
<input type="radio" class="iRadio_css" name="radio" id="radio" value="radio" />
หัวข้อทดสอบที่ 1</span>
<label class="iDetail">รายละเอียดหัวข้อทดสอบที่ 1 รายละเอียดหัวข้อทดสอบที่ 1 รายละเอียดหัวข้อทดสอบที่ 1
รายละเอียดหัวข้อทดสอบที่ 1 รายละเอียดหัวข้อทดสอบที่ 1 รายละเอียดหัวข้อทดสอบที่ 1</label>
<span class="iTopic">
<input type="radio" class="iRadio_css" name="radio" id="radio" value="radio" />
หัวข้อทดสอบที่ 2</span>
<label class="iDetail">รายละเอียดหัวข้อทดสอบที่ 2 รายละเอียดหัวข้อทดสอบที่ 2 รายละเอียดหัวข้อทดสอบที่ 2
รายละเอียดหัวข้อทดสอบที่ 2 รายละเอียดหัวข้อทดสอบที่ 2 รายละเอียดหัวข้อทดสอบที่ 2</label>
<span class="iTopic">
<input type="radio" class="iRadio_css" name="radio" id="radio" value="radio" />
หัวข้อทดสอบท3</span>
<label class="iDetail">รายละเอียดหัวข้อทดสอบที่ 3 รายละเอียดหัวข้อทดสอบที่ 3 รายละเอียดหัวข้อทดสอบที่ 3
รายละเอียดหัวข้อทดสอบที่ 3 รายละเอียดหัวข้อทดสอบที่ 3 รายละเอียดหัวข้อทดสอบที่ 3</label>
<span class="iTopic">
<input type="radio" class="iRadio_css" name="radio" id="radio" value="radio" />
หัวข้อทดสอบที่ 4</span>
<label class="iDetail">รายละเอียดหัวข้อทดสอบที่ 4 รายละเอียดหัวข้อทดสอบที่ 4 รายละเอียดหัวข้อทดสอบที่ 4
รายละเอียดหัวข้อทดสอบที่ 4 รายละเอียดหัวข้อทดสอบที่ 4 รายละเอียดหัวข้อทดสอบที่ 4</label>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">   
$(function(){   
    $(".iRadio_css").click(function(){   
			$(this).parent(".iTopic").next("label.iDetail").slideToggle("fast");
			$(this).parent(".iTopic").next("label.iDetail").siblings("label").slideUp('fast');
    });   
});   
</script> 

</body>
</html>

Ninenik 16-02-2011

ความคิดเห็นที่ 2

ขอบคุณมากค่ะ ^^

Zippy 16-02-2011 22:53

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน