JavaScript-da Spoyler

Hozir biz spoylerlarni qanday qilishni o'rganamiz. Spoylerlar deb men maxsus havola yordamida yoyish yoki yig'ish mumkin bo'lgan bloklarni tushunaman.

Quyidagi kod misolida spoiler klassidagi abzas spoyler hisoblanadi, toggle klassidagi havola esa ushbu spoylerni bosish orqali ko'rsatishi yoki yashirishi kerak:

<p>
	matnli abzar
	<a href="" class="toggle">yoyish</a>
</p>
<p class="spoiler">
	yashiringan spoyler
</p>
<p>
	matnli abzar
</p>

Matnda, albatta, ko'p spoylerlar bo'lishi mumkin va ularning har biri uchun o'z havolasi bo'lishi kerak:

<p>
	matnli abzar
</p>
<p>
	matnli abzar
	<a href="" class="toggle">1-spoylerni yoyish</a>
</p>
<p class="spoiler">
	yashiringan spoyler 1
</p>
<p>
	matnli abzar
</p>
<p>
	matnli abzar
	<a href="" class="toggle">2-spoylerni yoyish</a>
</p>
<p class="spoiler">
	yashiringan spoyler 2
</p>
<p>
	matnli abzar
</p>

Aniqki, yoyish havolasi va o'zi spoylerni qandaydir bog'lash kerak. Turli variantlarni topish mumkin, lekin bu holda men joylashuviga qilib qilishni taklif qilaman: aytaylik, toggle klassidagi havola spoiler klassidagi elementni ochadi yoki yopadi, ya'ni ushbu havolaning ota-onasidan keyin darhol joylashgan.

Spoyler standart holatda yashiringan bo'lsin, agar biz uni ko'rsatmoqchi bo'lsak - unga active klassini beramiz. Mos keladigan CSS kodini yozamiz:

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

Keltirilgan HTML va CSS kodlarini o'zingizga nusxalang. Spoylerlarning tavsiflangan ishlashini amalga oshiring.