1. ซ่อน-แสดงอิลิเมนท์

หัวข้อ

แบบฝึกปฏิบัติ

(ข้อกำหนดเบื้องต้น)

ตัวอย่างโจทย์

เพจที่ 1

style

html

script

โจทย์แต่ละแบบ

hide&show.1

คำอธิบาย

มี 1 เพจ
เมื่อมีการคลิกที่อิลิเมนท์ ให้ซ่อนหรือแสดงลูกๆของอิลิเมนท์นั้นๆ

จังหวัดพิษณุโลก

มี 9 อำเภอ

เมืองพิษณุโลก
วังทอง
บางระกำ
พรหมพิราม
นครไทย
เนินมะปราง
บางกระทุ่ม
ชาติตระการ
วัดโบสถ์

เมื่อคลิกที่ "มี 9 อำเภอ" จะแสดงชื่ออำเภอ ถ้าชื่ออำเภอแสดงอยู่แล้ว จะซ่อนชื่ออำเภอเหล่านั้น

<h1>จังหวัดพิษณุโลก</h1>
<div>มี 9 อำเภอ
<ol>
<li>เมืองพิษณุโลก
<ol>
<li>ในเมือง (Nai Mueang)</li>
<li>หัวรอ (Hua Ro)</li>
<li>วังน้ำคู้ (Wang Nam Khu)</li>
<li>จอมทอง (Chom Thong)</li>
<li>วัดจันทร์ (Wat Chan)</li>
<li>บ้านกร่าง (Ban Krang)</li>
<li>วัดพริก (Wat Phrik)</li>
<li>บ้านคลอง (Ban Khlong)</li>
<li>ท่าทอง (Tha Thong)</li>
<li>พลายชุมพล (Phlai Chumphon)</li>
<li>ท่าโพธิ์ (Tha Pho)</li>
<li>มะขามสูง (Makham Sung)</li>
<li>สมอแข (Samo Khae)</li>
<li>อรัญญิก (Aranyik)</li>
<li>ดอนทอง (Don Thong)</li>
<li>บึงพระ (Bueng Phra)</li>
<li>บ้านป่า (Ban Pa)</li>
<li>ไผ่ขอดอน (Phai Kho Don)</li>
<li>ปากโทก (Pak Thok)</li>
<li>งิ้วงาม (Ngio Ngam)</li>
</ol>
</li>
<li>วังทอง</li>
<li>บางระกำ</li>
<li>พรหมพิราม</li>
<li>นครไทย</li>
<li>เนินมะปราง</li>
<li>บางกระทุ่ม</li>
<li>ชาติตระการ</li>
<li>วัดโบสถ์</li>
</ol>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$("div, li").click( function (e)
{
$(this).children().slideToggle("slow");
e.stopImmediatePropagation();
}
);
$( function (e)
{
$("div, li").children().hide("slow");
}
);
</script>

province

แสดงชื่อจังหวัด ตามที่กำหนดให้
เมื่อคลิกจังหวัดใ ห้แสดงรายชื่ออำเภอของจังหวัดนั้น
เมื่อคลิกที่ชื่ออำเภอ ให้แสดงรายชื่อตำบลของอำเภอนั้นๆ
- มีอย่างน้อยหนึ่งอำเภอที่สามารถแสดงรายชื่อตำบลได้