Spoiler på JavaScript

Nu ska vi lära oss att göra spoilers. Med spoilers menar jag block som kan expanderas eller kollapsas med hjälp av en speciell länk.

I följande kodexempel är stycket med klassen spoiler en spoiler, och länken med klassen toggle ska vid klick visa eller dölja denna spoiler:

<p>
	stycke med text
	<a href="" class="toggle">expandera</a>
</p>
<p class="spoiler">
	dold spoiler
</p>
<p>
	stycke med text
</p>

I texten kan det förstås finnas många spoilers och varje sådan ska ha sin egen länk:

<p>
	stycke med text
</p>
<p>
	stycke med text
	<a href="" class="toggle">expandera spoiler 1</a>
</p>
<p class="spoiler">
	dold spoiler 1
</p>
<p>
	stycke med text
</p>
<p>
	stycke med text
	<a href="" class="toggle">expandera spoiler 2</a>
</p>
<p class="spoiler">
	dold spoiler 2
</p>
<p>
	stycke med text
</p>

Uppenbarligen måste länken för expandering och själva spoilern kopplas ihop på något sätt. Man kan komma på olika alternativ, men i det här fallet föreslår jag att göra det baserat på position: låt oss säga att länken med klassen toggle öppnar eller stänger elementet med klassen spoiler, som finns direkt under denna länks förälderelement.

Låt spoilern som standard vara dold, och om vi vill visa den - låt oss ge den klassen active. Låt oss skriva motsvarande CSS-kod:

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

Kopiera den medföljande HTML- och CSS-koden till dig. Implementera den beskrivna spoilerfunktionen.