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の協力のもと、主に私自身の学習・備忘録（メモ）用として作成しています。 複雑な機能や処理を含む部分については、公開前に私自身が入念な動作確認をしていますが、 ご利用の際は、必ずご自身で動作確認と必要に応じた修正をお願いいたします。
上に戻る