Spoileris JavaScript

Tagad mēs iemācīsimies veidot spoilerus. Ar spoileriem es saprotu blokus, kurus var izvērst vai sakļaut, izmantojot speciālu saiti.

Nākamajā koda piemērā rindkopa ar klasi spoiler ir spoileris, un saite ar klasi toggle ar klikšķi jāparāda vai jāpaslēpj šis spoileris:

<p>
	rindkopa ar tekstu
	<a href="" class="toggle">izvērst</a>
</p>
<p class="spoiler">
	paslēpts spoileris
</p>
<p>
	rindkopa ar tekstu
</p>

Tekstā, protams, var būt vairāki spoileri un katram jābūt savai saitei:

<p>
	rindkopa ar tekstu
</p>
<p>
	rindkopa ar tekstu
	<a href="" class="toggle">izvērst spoileri 1</a>
</p>
<p class="spoiler">
	paslēpts spoileris 1
</p>
<p>
	rindkopa ar tekstu
</p>
<p>
	rindkopa ar tekstu
	<a href="" class="toggle">izvērst spoileri 2</a>
</p>
<p class="spoiler">
	paslēpts spoileris 2
</p>
<p>
	rindkopa ar tekstu
</p>

Acīmredzami, ka saiti izvēršanai un pašu spoileri kaut kā jāsasaista. Var izdomāt dažādus variantus, bet šajā gadījumā es iesaku izdarīt pēc atrašanās vietas: teiksim, ka saite ar klasi toggle atver vai aizver elementu ar klasi spoiler, kas atrodas tieši zem šīs saites vecāka elementa.

Lai spoileris pēc noklusējuma būtu paslēpts, un ja mēs vēlamies to parādīt - dosim tam klasi active. Uzrakstīsim atbilstošu CSS kodu:

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

Kopējiet sev norādīto HTML un CSS kodu. Realizējiet aprakstīto spoileru darbību.