Spoiler JavaScriptissä

Nyt opimme tekemään spoilereita. Spoilereilla tarkoitan lohkoja, joita voidaan laajentaa tai tiivistää erityisellä linkillä.

Seuraavassa koodiesimerkissä kappale, jolla on luokka spoiler, on spoileri, ja linkki luokalla toggle tulisi klikkauksella näyttää tai piilottaa tämän spoilerin:

<p>
	kappale tekstillä
	<a href="" class="toggle">laajenna</a>
</p>
<p class="spoiler">
	piilotettu spoileri
</p>
<p>
	kappale tekstillä
</p>

Tekstissä voi tietysti olla monia spoilereita ja jokaisella pitäisi olla oma linkkinsä:

<p>
	kappale tekstillä
</p>
<p>
	kappale tekstillä
	<a href="" class="toggle">laajenna spoileri 1</a>
</p>
<p class="spoiler">
	piilotettu spoileri 1
</p>
<p>
	kappale tekstillä
</p>
<p>
	kappale tekstillä
	<a href="" class="toggle">laajenna spoileri 2</a>
</p>
<p class="spoiler">
	piilotettu spoileri 2
</p>
<p>
	kappale tekstillä
</p>

On ilmeistä, että laajennuslinkki ja itse spoileri on jotenkin linkitettävä. Voi keksiä erilaisia vaihtoehtoja, mutta tässä tapauksessa minä ehdotan tehdä sijainnin mukaan: sanotaan, että linkki luokalla toggle avaa tai sulkee elementin luokalla spoiler, sijoitettuna välittömästi tämän linkin vanhemman alapuolelle.

Olkoon spoileri oletuksena piilotettu, ja jos haluamme näyttää sen - annamme sille luokan active. Kirjoitetaan vastaava CSS-koodi:

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

Kopioi annetut HTML- ja CSS-koodit. Toteuta kuvattu spoilerien toiminta.