Spoiler dalam JavaScript

Sekarang kita akan belajar membuat spoiler. Yang saya maksud dengan spoiler adalah blok-blok yang dapat dibuka (diperlihatkan), atau ditutup (disembunyikan) dengan menggunakan tautan khusus.

Dalam contoh kode berikutnya, paragraf dengan kelas spoiler adalah sebuah spoiler, dan tautan dengan kelas toggle seharusnya ketika diklik dapat menampilkan atau menyembunyikan spoiler tersebut:

<p>
	paragraf dengan teks
	<a href="" class="toggle">buka</a>
</p>
<p class="spoiler">
	spoiler tersembunyi
</p>
<p>
	paragraf dengan teks
</p>

Dalam teks, tentu saja bisa ada banyak spoiler dan masing-masing harus memiliki tautannya sendiri:

<p>
	paragraf dengan teks
</p>
<p>
	paragraf dengan teks
	<a href="" class="toggle">buka spoiler 1</a>
</p>
<p class="spoiler">
	spoiler tersembunyi 1
</p>
<p>
	paragraf dengan teks
</p>
<p>
	paragraf dengan teks
	<a href="" class="toggle">buka spoiler 2</a>
</p>
<p class="spoiler">
	spoiler tersembunyi 2
</p>
<p>
	paragraf dengan teks
</p>

Jelas bahwa tautan untuk membuka dan spoiler itu sendiri harus dihubungkan dengan cara tertentu. Berbagai opsi dapat dibuat, tapi dalam kasus ini saya menyarankan untuk melakukannya berdasarkan posisi: katakanlah tautan dengan kelas toggle membuka atau menutup elemen dengan kelas spoiler, yang terletak tepat di bawah induk dari tautan ini.

Misalkan spoiler secara default disembunyikan, dan jika kita ingin menampilkannya - kita akan memberikan kelas active kepadanya. Mari tulis kode CSS yang sesuai:

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

Salin kode HTML dan CSS yang diberikan ke tempat Anda. Implementasikan fungsi spoiler seperti yang dijelaskan.