Спойлер на 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 кодови. Имплементирајте ја опишаната функционалност на спојлерите.