Spoiler in JavaScript

Now we will learn how to make spoilers. By spoilers, I mean blocks that can be expanded or collapsed using a special link.

In the following code example, a paragraph with the class spoiler is a spoiler, and a link with the class toggle should show or hide this spoiler on click:

<p> paragraph with text <a href="" class="toggle">expand</a> </p> <p class="spoiler"> hidden spoiler </p> <p> paragraph with text </p>

In the text, of course, there can be many spoilers and everyone should have their own link:

<p> paragraph with text </p> <p> paragraph with text <a href="" class="toggle">expand spoiler 1</a> </p> <p class="spoiler"> hidden spoiler 1 </p> <p> paragraph with text </p> <p> paragraph with text <a href="" class="toggle">expand spoiler 2</a> </p> <p class="spoiler"> hidden spoiler 2 </p> <p> paragraph with text </p>

Obviously, the link for expanding and the spoiler itself must somehow be connected. You can think of various options, but in this case, I suggest doing it by location: say that a link with the toggle class opens or closes an element with the spoiler class located immediately below the parent of this link.

Let the spoiler be hidden by default, and if we want to show it, we will give it the class active. Let's write the corresponding CSS code:

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

Copy the provided HTML and CSS codes. Implement the described work of spoilers.

enru