JavaScript-de spoyler

Häzir biz spoylerleri nädip ýasamaly bolar öwreneris. Spoylerler diýip men, aýratyn çykgyt ýardymy bilen açylýan ýa-da ýapylýan bloklary düşünýärin.

Aşakdaky kod nusgasynda, spoiler klassy bilen abzas spoyler bolup, toggle klassy bilen çykgyt bolsa tyklanda bu spoyleri görkezmeli ýa-da gizlemeli:

<p>
	tekstli abzas
	<a href="" class="toggle">aç</a>
</p>
<p class="spoiler">
	gizlenen spoyler
</p>
<p>
	tekstli abzas
</p>

Tekstde, elbetde, köp spoylerler bolup biler we olaryň her biriniň öz çykgydy bolmaly:

<p>
	tekstli abzas
</p>
<p>
	tekstli abzas
	<a href="" class="toggle">1-nji spoyleri aç</a>
</p>
<p class="spoiler">
	gizlenen spoyler 1
</p>
<p>
	tekstli abzas
</p>
<p>
	tekstli abzas
	<a href="" class="toggle">2-nji spoyleri aç</a>
</p>
<p class="spoiler">
	gizlenen spoyler 2
</p>
<p>
	tekstli abzas
</p>

Aç-ýaý etmek üçin çykgydy we spoyleriň özüni nähili bir baglanyşdyrmaly. Ähtimallar tapyp bolýar, ýöne bu ýagdaýda men ýerleşişi boýunça etmekli teklip edýärin: diýeliň, toggle klassy bilen çykgyt spoiler klassy bilen elementi açýar ýa-da ýapýar, şol çykgydyň ata-enesiniň derrew aşagynda ýerleşýän.

Spoyler bellenen ýagdaýda gizlenen bolsun, we eger biz ony görkezmek islesek - oňa active klassy bereris. Degişli CSS kody ýazalyň:

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

Berlen HTML we CSS kodlaryny özüňize göçürip alyň. Beýan edilen spoylerleriň işini amala aşyryň.