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コードを自身の環境にコピーしてください。説明されたスプイラーの動作を実装してください。