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.