JavaScript-spoiler

Nou sal ons leer hoe om spoilers te maak. Met spoilers bedoel ek blokke wat jy kan uitvou of toevou met behulp van 'n spesiale skakel.

In die volgende voorbeeldkode is die paragraaf met klas spoiler 'n spoiler, en die skakel met klas toggle moet by 'n klik die spoiler wys of versteek:

<p>
	paragraaf met teks
	<a href="" class="toggle">vou uit</a>
</p>
<p class="spoiler">
	versteekte spoiler
</p>
<p>
	paragraaf met teks
</p>

In die teks kan daar natuurlik baie spoilers wees en elkeen moet sy eie skakel hê:

<p>
	paragraaf met teks
</p>
<p>
	paragraaf met teks
	<a href="" class="toggle">vou spoiler 1 uit</a>
</p>
<p class="spoiler">
	versteekte spoiler 1
</p>
<p>
	paragraaf met teks
</p>
<p>
	paragraaf met teks
	<a href="" class="toggle">vou spoiler 2 uit</a>
</p>
<p class="spoiler">
	versteekte spoiler 2
</p>
<p>
	paragraaf met teks
</p>

Dit is duidelik dat die skakel vir uitvou en die spoiler self op een of ander manier verbind moet wees. 'n Mens kan verskillende opsies bedink, maar in hierdie geval stel ek voor om dit volgens ligging te doen: kom ons sê dat die skakel met klas toggle die element met klas spoiler oop of toemaak wat direk onder die ouer van hierdie skakel geleë is.

Laat die spoiler by verstek weggesteek wees, en as ons dit wil wys - gee ons dit klas active. Kom ons skryf die ooreenstemmende CSS-kode:

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

Kopieer die gegewe HTML- en CSS-kodes vir jouself. Implementeer die beskryfde werking van die spoilers.