1. CSSアコーディオン <input type="checkbox">

デモ

<input type="checkbox"> 要素と CSS を組み合わせて、JavaScript に依存しないアコーディオンを実装しています。タイトルをクリックすると開閉ができます。

タイトル：１

ここにコンテンツが入ります

リスト：1
リスト：2
リスト：3

タイトル：２

このアコーディオンは、上のアコーディオンとは独立して開閉します。

JavaScriptを使わずに実現しています。

CSS


/* チェックボックス自体を非表示にする */
.accordion-toggle {
  display: none;
}

/* コンテンツをデフォルトで非表示にする */
.accordion-content {
  display: none; 
  padding: 10px 20px 10px 30px;
  border: 1px solid #6699ff;
  background-color: #fff;
  margin-top: -1px; /* ボーダーの重なりを調整 */
}

/* チェックされたらコンテンツを表示する */
.accordion-toggle:checked ~ .accordion-content {
  display: block;
}

label {
  cursor: pointer; /* クリック可能であることを示す */
  display: block;
  background-color: #f4f8ff;
  border: 1px solid #6699ff;
  padding: 10px 0;
  font-weight: bold;
}

/* spanタグの中身はそのまま表示される */
label span {
  display: none;
}

/* 閉じた状態のマーク (▼) */
label:before {
  content: '▼';
  margin-right: 9.5px;
  color: #3333ff;
  margin-left: 10px;
}

/* チェックされた（開いた）状態のマーク (▲) */
.accordion-toggle:checked + label:before {
  content: '▲';
}

/* その他の装飾 */
.accordion-wrapper {
  max-width: 400px;
  margin: 20px 0;
}

HTML


<div class="accordion-wrapper">
  <input type="checkbox" id="accordion-1" class="accordion-toggle">
  <label for="accordion-1">タイトル：１</label>
    <div class="accordion-content">
      <p>ここにコンテンツが入ります</p>
        <ul>
          <li>リスト：1</li>
          <li>リスト：2</li>
          <li>リスト：3</li>
        </ul>
    </div>
</div>

<div class="accordion-wrapper">
  <input type="checkbox" id="accordion-2" class="accordion-toggle">
  <label for="accordion-2">タイトル：２</label>
    <div class="accordion-content">
      <p>このアコーディオンは、上のアコーディオンとは独立して開閉します。</p>
      <p>JavaScriptを使わずに実現しています。</p>
    </div>
</div>

アコーディオン実装方法は3種類

アコーディオン実装方法は3種類あります。

実は、当サイトのブログメニューで採用しているのはチェックボックス方式（<input type="checkbox">）です。これは、全て閉じるという機能の実装が最も容易だったためです。一方、最新の <details>/<summary> 要素は、標準機能での全て閉じる実現が難しいという特徴があります。

以下に、3種類のアコーディオン実装方法についてまとめました。また、次のページでは、 <details>/<summary>要素を使った具体的なアコーディオンのコードを掲載しています。

＜3種のアコーディオン実装比較＞

1. JavaScript で制御（クラス操作）

開閉：OK
JavaScript の使用：あり（主たる制御）
全て閉じるの制御：容易（JavaScript で一括操作）

2. HTML5 `<details>` 要素

開閉：OK
JavaScript の使用：なし（ネイティブ機能）
全て閉じるの制御：難しい（JavaScript で個別操作が必要）

3. CSSテクニック (`<input type="checkbox">`)

開閉：OK
JavaScript の使用：なし（CSS / HTML で実現）
全て閉じるの制御：容易（JavaScript で checked を一括操作）

★ このページのコードは、Geminiの協力のもと、主に私自身の学習・備忘録（メモ）用として作成しています。複雑な機能や処理を含む部分については、公開前に私自身が入念な動作確認をしていますが、ご利用の際は、必ずご自身で動作確認と必要に応じた修正をお願いいたします。

ぱたぱたアニメ館