Spoiler på JavaScript

Nå skal vi lære å lage spoilere. Med spoilere mener jeg blokker som kan utvides eller kollapses ved hjelp av en spesiell lenke.

I det følgende kodeeksemplet er avsnittet med klassen spoiler en spoiler, og lenken med klassen toggle skal ved klikk vise eller skjule denne spoileren:

<p>
	avsnitt med tekst
	<a href="" class="toggle">utvid</a>
</p>
<p class="spoiler">
	skjult spoiler
</p>
<p>
	avsnitt med tekst
</p>

I teksten kan det selvfølgelig være mange spoilere og hver av dem skal ha sin egen lenke:

<p>
	avsnitt med tekst
</p>
<p>
	avsnitt med tekst
	<a href="" class="toggle">utvid spoiler 1</a>
</p>
<p class="spoiler">
	skjult spoiler 1
</p>
<p>
	avsnitt med tekst
</p>
<p>
	avsnitt med tekst
	<a href="" class="toggle">utvid spoiler 2</a>
</p>
<p class="spoiler">
	skjult spoiler 2
</p>
<p>
	avsnitt med tekst
</p>

Det er åpenbart at lenken for utvidelse og selve spoileren må kobles sammen på en eller annen måte. Man kan finne på forskjellige alternativer, men i dette tilfellet foreslår jeg å gjøre det basert på plassering: la oss si at lenken med klassen toggle åpner eller lukker elementet med klassen spoiler, plassert rett under forelderen til denne lenken.

La spoileren som standard være skjult, og hvis vi ønsker å vise den - la oss gi den klassen active. La oss skrive den tilsvarende CSS-koden:

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

Kopier den gitte HTML- og CSS-koden. Implementer den beskrevne funksjonaliteten for spoilere.