# 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.

← →
↑
en ru