Accordion bằng JavaScript

Bây giờ hãy cùng triển khai một accordion. Nó giống với các tab được lật ngang. Đồng thời, trong accordion, bạn có thể đóng tab hiện tại bằng cách nhấp vào liên kết đang hoạt động.

Đây là mẫu:

Cũng hãy nghiên cứu mã HTML mà chúng ta sẽ sử dụng để giải quyết bài toán:

<div id="parent">
	<div class="tab active">
		<div class="link">
			<a href="#" >tab 1</a>
		</div>
		<div class="text">
			nội dung tab 1
		</div>
	</div>
	<div class="tab">
		<div class="link">
			<a href="#" >tab 2</a>
		</div>
		<div class="text">
			nội dung tab 2
		</div>
	</div>
	<div class="tab">
		<div class="link">
			<a href="#" >tab 3</a>
		</div>
		<div class="text">
			nội dung tab 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;
}

Thảo luận

Về mặt kỹ thuật, mã HTML của accordion thuận tiện hơn mã của các tab: trong đó, các liên kết được đặt trực tiếp phía trên nội dung ẩn mà chúng mở và đóng. Ngoài ra, lớp active trong mã HTML của chúng ta được gán cho phần tử cha chung của liên kết và nội dung ẩn.

Điều này có nghĩa là khi nhấp vào một liên kết, chỉ cần hủy kích hoạt tab cũ và kích hoạt tab mới. Để hủy kích hoạt tab cũ, cần tìm tab có lớp active và xóa lớp đó khỏi nó.

Để kích hoạt tab mới, cần tìm phần tử cha của liên kết đó (tab chứa liên kết) và cấp cho nó lớp active. Về mặt kỹ thuật, việc tìm kiếm như vậy có thể được thực hiện như sau: chỉ cần tìm phần tử cha gần nhất của liên kết có lớp tab.

Sao chép mã HTML và CSS đã cho. Triển khai accordion theo thuật toán đã mô tả.