Spoiler på JavaScript

Nu skal vi lære at lave spoileres. Med spoileres mener jeg blokke, som kan udfoldes eller foldes sammen ved hjælp af et specielt link.

I det følgende kodeeksempel er afsnittet med klassen spoiler en spoiler, og linket med klassen toggle skal ved klik vise eller skjule denne spoiler:

<p>
	afsnit med tekst
	<a href="" class="toggle">udfold</a>
</p>
<p class="spoiler">
	skjult spoiler
</p>
<p>
	afsnit med tekst
</p>

I teksten kan der selvfølgelig være mange spoileres og hver skal have sit eget link:

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

Det er indlysende, at linket til udfoldning og selve spoileren skal forbindes på en eller anden måde. Man kan finde på forskellige muligheder, men i dette tilfælde foreslår jeg at gøre det via placering: lad os sige, at linket med klassen toggle åbner eller lukker elementet med klassen spoiler, placeret lige under forælderen til dette link.

Lad spoileren som standard være skjult, og hvis vi vil vise den - giver vi den klassen active. Lad os skrive den tilsvarende CSS kode:

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

Kopier den angivne HTML og CSS kode til dig selv. Implementer den beskrevne funktionalitet for spoileres.