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 코드를 복사하세요. 설명된 스포일러 동작을 구현하세요.