JavaScriptによるアコーディオン

それでは、アコーディオンを実装しましょう。これは横に倒れたタブのようなものです。ただし、アコーディオンでは、アクティブなリンクをクリックすることで現在のタブを閉じることができます。

サンプルは以下の通りです：

また、課題を解決するためのHTML構造も確認しておきましょう：

html<div id="parent">
  <div class="tab active">
    <div class="link">
      <a href="#" >タブ 1</a>
    </div>
    <div class="text">
      タブ 1 のテキスト
    </div>
  </div>
  <div class="tab">
    <div class="link">
      <a href="#" >タブ 2</a>
    </div>
    <div class="text">
      タブ 2 のテキスト
    </div>
  </div>
  <div class="tab">
    <div class="link">
      <a href="#" >タブ 3</a>
    </div>
    <div class="text">
      タブ 3 のテキスト
    </div>
  </div>
</div>

css#parent {
  margin: 0 auto;
  width: 400px;
}
.tab {
  margin-bottom: 10px;
}

.tab .link a {
  display: block;
  padding: 10px;
  color: black;
  text-decoration: none;
  text-align: center;
  background: #f8f8f8;
  border: 1px solid gray;
}
.tab .link:hover a {
  background: #f2f2f2;
}

.tab:not(.active) .text {
  display: none;
}
.tab .text {
  border: 1px dashed gray;
  border-top: none;
  
  padding: 10px;
  height: 300px;
}

解説

技術的には、アコーディオンのHTMLコードはタブのコードよりも扱いやすいです：リンクが、開閉する対象のコンテンツのすぐ上に配置されています。さらに、このHTML構造では、クラス active はリンクとコンテンツの共通の親要素に付けられます。

これは、リンクがクリックされたときに、古いタブを非アクティブにし、新しいタブをアクティブにすればよいことを意味します。古いタブを非アクティブにするには、クラス active を持つタブを見つけて、そのクラスを削除します。

新しいタブをアクティブにするには、クリックされたリンクからその親タブを見つけ、クラス active を付けます。技術的には、この検索は次のように行えます：リンクから最も近い、クラス tab を持つ親要素を見つけます。