アコーディオンの実装方法

2025年8月29日 2025年8月29日

西尾洋祐

アコーディオンは、タブ切り替えと並んで情報をスッキリ見せたいときに便利なUIです。コンテンツを折りたたんで表示することで、情報の整理や表示領域の節約、シンプルなデザインを実現します。特にQ&Aや長文規約などをコンパクトにまとめられるため、モバイルでの利用にも最適です。ユーザーが必要な情報を効率的に見つけるのにも役立ちます。
本記事では、アコーディオンの実装方法を分かりやすく解説します。

今回の記事で分かること

アコーディオンを使って、情報をシンプルに見せる実装方法がわかります。

完成デモの紹介

まずはデモをご覧ください。

See the Pen アコーディオン by はなはな氏 (@wxftomuu-the-selector) on CodePen.

HTML

今回のサンプルは、jQueryとCSSを使用して、アコーディオン機能を実装しています。
3つのアコーディオンを用意し、各タイトルに対応するコンテンツを表示しています。必要に応じて項目数やコンテンツは自由に追加・変更してください。

<!-- jQueryの読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<h3>アコーディオン</h3>
<div class="container">
  <!-- アコーディオン全体をまとめるul -->
  <ul class="accordion-area">
    <!-- アコーディオン1つ目の項目 -->
    <li>
      <section>
        <!-- 質問タイトル（クリックで開閉） -->
        <div class="title">よくある質問１</div>
        <!-- 開閉するコンテンツ部分 -->
        <div class="content">
          <div class="inner">
            質問の回答１質問の回答１質問の回答１質問の回答１質問の回答１
          </div>
        </div>
      </section>
    </li>

    <!-- アコーディオン2つ目の項目 -->
    <li>
      <section>
        <div class="title">よくある質問２</div>
        <div class="content">質問の回答２</div>
      </section>
    </li>

    <!-- アコーディオン3つ目の項目 -->
    <li>
      <section>
        <div class="title">よくある質問３</div>
        <div class="content">質問の回答３</div>
      </section>
    </li>
  </ul>
</div>

CSS

続いて、アコーディオンに適用するCSSをご紹介します。
このサンプルでは、タイトルをクリックするとスムーズに開閉するアニメーションを付けています。＋－アイコンやカラーの変化で「今どの項目が開いているか」が一目でわかるデザインにしています。

/* =========================
   コンテンツ全体の基本スタイル
========================= */
/* 
この部分は、アコーディオンを適用するための
サンプルレイアウト（見た目）のスタイルです。
実際のサイトに合わせて、自由にカスタマイズしてください。
*/

h3 {
  color: #1a8093;
  text-align: center;
}
.container {
  color: #333;
  width: 80%;
  max-width: 800px;
  margin: 0 auto;
}

/* =========================
   アコーディオン全体のスタイル
========================= */
ul.accordion-area {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.accordion-area li {
  position: relative;
  margin: 10px 0;            /* 項目間の余白 */
}

/* アイコン（Font Awesome使用） */
ul.accordion-area li:before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\51";
  position: absolute;
  left: 20px;
  top: 17px;
  color: #1a8093;            /* 初期カラー */
  font-size: 1.2em;
  z-index: 9;
  transition: all .5s ease;  /* ホバー時のアニメーション */
}

/* ホバー時と開いた時のアイコンカラー変更 */
ul.accordion-area li:has(.title.close)::before,
ul.accordion-area li:hover:before {
  color: #FFD900;            /* 黄色に変更 */
}

/* =========================
   タイトル部分のスタイル
========================= */
ul.accordion-area section {
  background: #BEEAE9;       /* セクション背景色 */
  border-radius: 10px;
}
ul.accordion-area li .title {
  position: relative;
  cursor: pointer;
  padding: 20px 45px;
  margin: 0;
  transition: all .5s ease;  /* 背景変更アニメーション */
  border-radius: 10px;
}

/* 開いている状態のタイトルは角丸を上だけ残す */
ul.accordion-area li .title.close {
  border-radius: 10px 10px 0 0;
}

/* ホバー時と開いている時の背景・文字色変更 */
ul.accordion-area .title.close,
ul.accordion-area li .title:hover {
  background: #1a8093;       /* 背景を濃い青に */
  color: #fff;               /* 文字を白に */
}

/* =========================
   プラス/マイナスアイコン（擬似要素で作成）
========================= */
ul.accordion-area li .title::before,
ul.accordion-area li .title::after {
  position: absolute;
  content: '';
  width: 15px;
  height: 2px;
  background-color: #333;
}
ul.accordion-area li .title:hover::before,
ul.accordion-area li .title:hover::after {
  background-color: #fff;
}
ul.accordion-area li .title::before {
  top: 50%;
  right: 20px;
  transform: rotate(0deg);   /* 横線 */
  transition: 0.5s;
}
ul.accordion-area li .title::after {
  top: 50%;
  right: 20px;
  transform: rotate(90deg);  /* 縦線（プラス） */
  transition: 0.5s;
}
/* 開いている時はマイナス表示にする（縦線消す） */
ul.accordion-area li .title.close::after {
  background-color: #fff;
  transform: rotate(0deg);
}

/* =========================
   コンテンツ部分（開閉領域）
========================= */
ul.accordion-area li .content {
  display: none;             /* 初期は非表示 */
  padding: 20px;
}
ul.accordion-area li .inner {
  display: flex;
  align-items: flex-start;
  line-height: 1.5em;
}
/* 回答部分のアイコン */
ul.accordion-area li .inner::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\41";            /* アイコンコード */
  display: block;
  margin-right: 8px;
  color: #1a8093;
  font-size: 1.2em;
}

JS

以下は、タイトルをクリックした際に対応するコンテンツをスライド表示するためのJavaScriptコードです。ページ読み込み時に最初の項目を自動で開く処理も含まれています。
ページ読み込み時に最初の項目を自動で開きたくない場合は、 <ul> タグに.noopenクラスを付与すれば、すべての項目が閉じた状態からスタートします。

// ================================
// アコーディオン開閉処理
// ================================

// タイトル(.title)がクリックされたときの処理
$('.accordion-area li .title').on('click', function () {
  
  // クリックしたタイトル直後の.content要素を取得
  var findElm = $(this).next(".content");
  
  // contentをスライドで開閉
  $(findElm).slideToggle();
  
  // クリックしたタイトルにcloseクラスを付け外しして状態を切り替え
  if ($(this).hasClass('close')) {
    $(this).removeClass('close'); // クラスを削除（閉じる）
  } else {
    $(this).addClass('close');    // クラスを追加（開く）
  }
});

// ================================
// ページ読み込み時の初期表示設定
// ================================
$(window).on('load', function () {
  
  // ul.accordion-areaに.noopenクラスがなければ、最初の項目を開く
  if ($('ul.accordion-area.noopen').length === 0) {
    
    // 最初のli内のsectionにopenクラスを付与
    $('.accordion-area li:first-of-type section').addClass("open");
    
    // openクラスがついた要素ごとに処理
    $(".open").each(function (index, element) {
      
      // タイトルにcloseクラスを付与（見た目切り替え）
      var Title = $(element).children('.title');
      $(Title).addClass('close');
      
      // contentをスライドで表示
      var Box = $(element).children('.content');
      $(Box).slideDown(500); // 500msでアニメーション
    });
  }
});

まとめ

今回ご紹介したタブ切り替えの実装方法は、CSSで見た目を整え、JavaScriptで動きを制御する仕組みです。レスポンシブ対応やURLのハッシュによる直接アクセスにも対応しているため、実際のサイト制作でも幅広く活用していただけます。
デザインや動作を調整しながら、ご自身のWebサイトに合ったタブ切り替え機能を実装してみてください。

なお、弊社では「サイトの更新まで手が回らない…」という方向けに、更新作業の代行や技術的なサポートも承っております。「同じように実装したけれどうまく動かない」などお困りの際は、お気軽にご相談ください。

少しでもこの記事がお役に立てれば幸いです。最後までお読みいただき、ありがとうございました。

この記事を書いた人