Спойлер на 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 код. Реализирайте описаната работа на спойлерите.