Spoiler bằng JavaScript

Bây giờ chúng ta sẽ học cách tạo spoiler. Tôi hiểu spoiler là các khối có thể mở rộng hoặc thu gọn bằng một liên kết đặc biệt.

Trong ví dụ mã tiếp theo, đoạn văn có lớp spoiler là một spoiler, và liên kết có lớp toggle khi nhấp vào sẽ hiển thị hoặc ẩn spoiler này:

<p>
	đoạn văn với văn bản
	<a href="" class="toggle">mở rộng</a>
</p>
<p class="spoiler">
	spoiler bị ẩn
</p>
<p>
	đoạn văn với văn bản
</p>

Trong văn bản, tất nhiên có thể có nhiều spoiler và mỗi cái phải có liên kết riêng của nó:

<p>
	đoạn văn với văn bản
</p>
<p>
	đoạn văn với văn bản
	<a href="" class="toggle">mở rộng spoiler 1</a>
</p>
<p class="spoiler">
	spoiler bị ẩn 1
</p>
<p>
	đoạn văn với văn bản
</p>
<p>
	đoạn văn với văn bản
	<a href="" class="toggle">mở rộng spoiler 2</a>
</p>
<p class="spoiler">
	spoiler bị ẩn 2
</p>
<p>
	đoạn văn với văn bản
</p>

Rõ ràng là cần liên kết liên kết để mở rộng và chính spoiler lại với nhau theo cách nào đó. Có thể nghĩ ra các phương án khác nhau, nhưng trong trường hợp này tôi đề xuất thực hiện theo vị trí: giả sử rằng liên kết có lớp toggle mở hoặc đóng phần tử có lớp spoiler, nằm ngay dưới phần tử cha của liên kết này.

Hãy để spoiler bị ẩn theo mặc định, và nếu chúng ta muốn hiển thị nó - hãy cung cấp cho nó lớp active. Hãy viết mã CSS tương ứng:

.spoiler:not(.active) {
	display: none;
}

Sao chép mã HTML và CSS đã cho cho chính bạn. Triển khai hoạt động đã mô tả của spoiler.