Spoiler dalam JavaScript

Sekarang kita akan belajar membuat spoiler. Maksud saya dengan spoiler ialah blok yang boleh dibuka atau ditutup dengan menggunakan pautan khas.

Dalam contoh kod berikut, perenggan dengan kelas spoiler adalah spoiler, dan pautan dengan kelas toggle harus mengklik untuk menunjukkan atau menyembunyikan spoiler ini:

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

Sudah tentu, boleh ada banyak spoiler dalam teks dan setiap satu mesti mempunyai pautan sendiri:

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

Jelas sekali, pautan untuk membuka dan spoiler itu sendiri perlu dihubungkan dalam beberapa cara. Pelbagai pilihan boleh difikirkan, tetapi dalam kes ini saya mencadangkan untuk melakukannya berdasarkan kedudukan: katakan bahawa pautan dengan kelas toggle membuka atau menutup elemen dengan kelas spoiler, terletak tepat di bawah induk pautan ini.

Biarkan spoiler disembunyi secara lalai, dan jika kita mahu menunjukkannya - kita akan memberikan kelas active kepadanya. Mari tulis kod CSS yang sepadan:

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

Salin kod HTML dan CSS yang diberikan. Laksanakan kerja spoiler seperti yang diterangkan.