CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSとJavaScriptでアコーディオン（開閉パネル）を作成する方法をわかりやすく解説

CSSとJavaScriptを組み合わせることで、クリックすると内容が開閉する「アコーディオン（折りたたみパネル）」を簡単に実装できます。本記事では、実際に動作するサンプルコードをもとに、その作成手順と仕組みを詳しく解説します。

アコーディオンの実装例

以下は、HTML・CSS・JavaScriptを使ってアコーディオンを実装した完全なサンプルコードです。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.demo {
   background-color: #eee;
   cursor: pointer;
   padding: 25px;
   width: 100%;
}
.active, .demo:hover {
   background-color: #ccc;
   border: 2px;
   font-size: 14px;
}
.panel {
   padding: 0 18px;
   display: none;
   background-color: #F0F8FF;
   overflow: hidden;
}
</style>
</head>
<body>
<h2>試験情報</h2>
<p>試験に関する情報は以下の通りです：</p>
<button class="demo">受験票</button>
<div class="panel">
   <p>受験票は3月25日に公開されます。</p>
</div>
<button class="demo">試験日</button>
<div class="panel">
   <p>試験は3月30日に実施されます。</p>
</div>
<script>
var val = document.getElementsByClassName("demo");
var i;
for (j = 0; j < val.length; j++) {
   val[j].addEventListener("click", function() {
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      if (panel.style.display === "block") {
         panel.style.display = "none";
      } else {
         panel.style.display = "block";
      }
   });
}
</script>
</body>
</html>

コードの仕組みを解説

1. HTMLの構造

ボタン要素（button.demo）と、その直後に配置される表示・非表示を切り替えるコンテンツ領域（div.panel）がペアになっています。この「ボタンの次の兄弟要素」という構造が、JavaScriptでの制御をシンプルにしています。

2. CSSによるスタイリング

.demoクラスでボタンの基本デザインを定義し、:hoverや.activeクラスでマウスオーバー時・開閉中の見た目を変化させています。また、.panelには初期状態でdisplay: none;を指定することで、コンテンツを非表示にしています。

3. JavaScriptによる開閉処理

getElementsByClassName("demo")ですべてのボタンを取得し、forループで各ボタンにクリックイベントを登録します。クリックされると以下の処理が実行されます。

  • classList.toggle("active") … ボタンのアクティブ状態を切り替え、スタイルを変更します。
  • nextElementSibling … クリックされたボタンの直後にあるパネル要素を取得します。
  • displayプロパティの値を判定し、blockならnoneへ、noneならblockへ切り替えることで、パネルの表示・非表示を制御します。

実行結果

上記のコードをブラウザで表示すると、次のような画面になります。

CSSとJavaScriptでアコーディオン（開閉パネル）を作成する方法をわかりやすく解説

いずれかのボタンをクリックすると、非表示だった情報が展開されて表示されます。

CSSとJavaScriptでアコーディオン（開閉パネル）を作成する方法をわかりやすく解説

もう一度同じボタンをクリックすれば、パネルは再び閉じられます。このように、CSSで見た目を整え、JavaScriptで表示の切り替えを制御するだけで、FAQやメニューなどに活用できるアコーディオンUIを手軽に作成できます。

  1. CSSとJavaScriptでリスト表示とグリッド表示を切り替える方法【サンプルコード付き】

    Webアプリケーションや管理画面などでは、コンテンツの表示形式を「リスト表示」と「グリッド表示」で切り替えられるUIがよく使われています。本記事では、CSSとJavaScript（バニラJS）だけを使って、ボタンクリックでリスト表示とグリッド表示を切り替える機能を実装する方法を解説します。実装のポイントこの機能は、以下の3つの要素で構成されています。カラムレイアウト：float を使って各カラムを横並びに配置します切り替えボタン：アクティブ状態のスタイルを持つボタンを配置しますJavaScript関数：カラムの幅（width）を変更し、ボタンの active クラスを付け替えますサンプルコード

  2. CSSとJavaScriptで拡張グリッド（クリックで展開するグリッド）を作成する方法

    CSSとJavaScriptを組み合わせることで、カードをクリックすると詳細パネルが展開される「拡張グリッド（Expanding Grid）」を簡単に実装できます。本記事では、3カラム構成のグリッドを例に、具体的な実装手順をわかりやすく解説します。 実装のポイント クリックイベント：各カラムにonclick属性を設定し、クリックされたカラムに対応するタブを開きます。 表示の切り替え：新しいタブを開く前に既存のタブをすべて非表示にすることで、常に1つのタブだけが展開された状態を保ちます。 閉じるボタン：タブ右上の「×」ボタンをクリックするとパネルが閉じ、元のグリッド表示に戻ります。 サンプル