JavaScript'te Spoyler

Şimdi spoyler yapmayı öğreneceğiz. Spoylerlerden kastım, özel bir bağlantı ile açılabilen veya kapatılabilen bloklardır.

Aşağıdaki kod örneğinde, sınıfı spoiler olan paragraf bir spoylerdir ve sınıfı toggle olan bağlantı, tıklandığında bu spoyleri göstermeli veya gizlemelidir:

<p>
	metin ile paragraf
	<a href="" class="toggle">aç</a>
</p>
<p class="spoiler">
	gizli spoyler
</p>
<p>
	metin ile paragraf
</p>

Metinde elbette birçok spoyler olabilir ve her birinin kendi bağlantısı olmalıdır:

<p>
	metin ile paragraf
</p>
<p>
	metin ile paragraf
	<a href="" class="toggle">1. spoyleri aç</a>
</p>
<p class="spoiler">
	gizli spoyler 1
</p>
<p>
	metin ile paragraf
</p>
<p>
	metin ile paragraf
	<a href="" class="toggle">2. spoyleri aç</a>
</p>
<p class="spoiler">
	gizli spoyler 2
</p>
<p>
	metin ile paragraf
</p>

Açıktır ki, açma bağlantısı ile spoylerin kendisi bir şekilde ilişkilendirilmelidir. Çeşitli seçenekler bulunabilir, ancak bu durumda ben konumlarına göre yapmayı öneriyorum: diyelim ki, toggle sınıfına sahip bağlantı, hemen kendi üst öğesinin altında bulunan, spoiler sınıfına sahip öğeyi açar veya kapatır.

Spoyler varsayılan olarak gizli olsun ve göstermek istediğimizde ona active sınıfını verelim. İlgili CSS kodunu yazalım:

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

Verilen HTML ve CSS kodlarını kendinize kopyalayın. Açıklanan spoyler işlevini uygulayın.