Спојлер на JavaScript-у

Сада ћемо научити како се праве спојлери. Под спојлерима подразумевам блокове које можемо развити или скупити помоћу специјалне везе.

У следећем примеру кода, пасус са класом spoiler је спојлер, а веза са класом toggle треба да при клику прикаже или сакрије тај спојлер:

<p>
	пасус са текстом
	<a href="" class="toggle">развиј</a>
</p>
<p class="spoiler">
	сакривени спојлер
</p>
<p>
	пасус са текстом
</p>

У тексту, наравно, може бити много спојлера и сваки треба да има своју везу:

<p>
	пасус са текстом
</p>
<p>
	пасус са текстом
	<a href="" class="toggle">развиј спојлер 1</a>
</p>
<p class="spoiler">
	сакривени спојлер 1
</p>
<p>
	пасус са текстом
</p>
<p>
	пасус са текстом
	<a href="" class="toggle">развиј спојлер 2</a>
</p>
<p class="spoiler">
	сакривени спојлер 2
</p>
<p>
	пасус са текстом
</p>

Очигледно је да везу за развој и сам спојлер треба некако повезати. Може се смислити различите варијанте, али у овом случају ја предлажем да урадимо по локацији: рецимо да веза са класом toggle отвара или затвара елемент са класом spoiler, који се налази одмах испод родитеља те везе.

Нека спојлер подразумевано буде сакривен, а ако желимо да га прикажемо - даћемо му класу active. Напишимо одговарајући CSS код:

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

Копирајте себи дате HTML и CSS кодове. Имплементирајте описан рад спојлера.