อะคอร์เดียนใน JavaScript

ตอนนี้เรามาลองสร้างอะคอร์เดียนกัน มันคล้ายกับแท็บที่ถูกพลิกไปด้านข้าง นอกจากนี้ในอะคอร์เดียนคุณยังสามารถปิดแท็บปัจจุบันได้ด้วยการคลิกที่ลิงก์ที่ใช้งานอยู่

นี่คือตัวอย่าง:

ศึกษารูปแบบการจัดวางที่เราจะใช้แก้ไขปัญหานี้ด้วย:

<div id="parent">
	<div class="tab active">
		<div class="link">
			<a href="#" >แท็บ 1</a>
		</div>
		<div class="text">
			ข้อความของแท็บ 1
		</div>
	</div>
	<div class="tab">
		<div class="link">
			<a href="#" >แท็บ 2</a>
		</div>
		<div class="text">
			ข้อความของแท็บ 2
		</div>
	</div>
	<div class="tab">
		<div class="link">
			<a href="#" >แท็บ 3</a>
		</div>
		<div class="text">
			ข้อความของแท็บ 3
		</div>
	</div>
</div>

#parent {
	margin: 0 auto;
	width: 400px;
}
.tab {
	margin-bottom: 10px;
}

.tab .link a {
	display: block;
	padding: 10px;
	color: black;
	text-decoration: none;
	text-align: center;
	background: #f8f8f8;
	border: 1px solid gray;
}
.tab .link:hover a {
	background: #f2f2f2;
}

.tab:not(.active) .text {
	display: none;
}
.tab .text {
	border: 1px dashed gray;
	border-top: none;
	
	padding: 10px;
	height: 300px;
}

การอภิปราย

ในทางเทคนิคโค้ด HTML ของอะคอร์เดียนสะดวกกว่าโค้ดของแท็บ: ในนั้นลิงก์จะอยู่ตรงเหนือสปอยเลอร์ที่พวกมันเปิดและปิด นอกจากนี้คลาส active ในรูปแบบการจัดวางของเราถูกกำหนดให้กับผู้ปกครองทั่วไปของลิงก์และสปอยเลอร์

นั่นหมายความว่าเมื่อคลิกที่ลิงก์เพียงแค่ต้องยกเลิกการใช้งานแท็บเก่าและเปิดใช้งานแท็บใหม่ เพื่อยกเลิกการใช้งานแท็บเก่าต้องหาแท็บที่มีคลาส active และลบคลาสนี้ออกจากมัน

เพื่อเปิดใช้งานแท็บใหม่ต้องเมื่อคลิกที่ลิงก์ให้หาแท็บที่เป็นผู้ปกครองของลิงก์นี้และกำหนดคลาส active ให้กับมัน ในทางเทคนิคการค้นหาดังกล่าวสามารถทำได้ดังนี้: แค่หาผู้ปกครองของลิงก์ที่ใกล้ที่สุดซึ่งมีคลาส tab

คัดลอกโค้ด HTML และ CSS ที่ให้มาไว้ที่คุณเอง นำอะคอร์เดียนมาใช้ตามอัลกอริทึมที่อธิบายไว้