JavaScriptのスプイラー

今からスプイラーの作り方を学びます。 ここで言うスプイラーとは、特別なリンクをクリックすることで 展開したり折りたたんだりできるブロックのことです。

次のコード例では、クラスが spoilerの段落がスプイラーで、 クラスがtoggleのリンクはクリックで このスプイラーを表示または非表示にすることになっています：

html<p>
  テキスト段落
  <a href="" class="toggle">展開</a>
</p>
<p class="spoiler">
  隠されたスプイラー
</p>
<p>
  テキスト段落
</p>

テキストにはもちろん複数のスプイラーがあり、 それぞれに独自のリンクがあるはずです：

html<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コードを書きましょう：

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