Σπόιλερ σε 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 κώδικα. Υλοποιήστε την περιγραφόμενη λειτουργία των σπόιλερ.