JavaScript-də Spoyler

İndi biz spoylerlərin necə ediləcəyini öyrənəcəyik. Spoylerlər dedikdə, xüsusi bir keçid vasitəsilə açıla və ya bağlana bilən blokları nəzərdə tuturam.

Aşağıdakı kod nümunəsində, spoiler sinfi olan abzas spoylerdir və toggle sinfi olan keçid isə klikləndikdə bu spoyleri göstərməli və ya gizlətməlidir:

<p>
	mətnli abzas
	<a href="" class="toggle">aç</a>
</p>
<p class="spoiler">
	gizli spoyler
</p>
<p>
	mətnli abzas
</p>

Mətndə, əlbəttə ki, çoxlu spoylerlər ola bilər və hər birinin öz keçidi olmalıdır:

<p>
	mətnli abzas
</p>
<p>
	mətnli abzas
	<a href="" class="toggle">1-ci spoyleri aç</a>
</p>
<p class="spoiler">
	gizli spoyler 1
</p>
<p>
	mətnli abzas
</p>
<p>
	mətnli abzas
	<a href="" class="toggle">2-ci spoyleri aç</a>
</p>
<p class="spoiler">
	gizli spoyler 2
</p>
<p>
	mətnli abzas
</p>

Aydındır ki, açma keçidi ilə spoylerin özünü bir şəkildə əlaqələndirmək lazımdır. Müxtəlif variantlar təklif etmək olar, amma bu halda mən yerləşdiyi yerə görə etməyi təklif edirəm: deyək ki, toggle sinfi olan keçid, dərhal öz valideyninin altında yerləşən spoiler sinfi olan elementi açır və ya bağlayır.

Spoyler standart olaraq gizli olsun, amma biz onu göstərmək istəyiriksə - ona active sinfi verək. Uyğun CSS kodunu yazaq:

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

Verilmiş HTML və CSS kodlarını özünüzə köçürün. Təsvir olunan spoyler işini həyata keçirin.