jQueryでシンプルなアコーディオンを作成する方法

今回は、jQueryを使ってシンプルなアコーディオンメニューを作成する方法をご紹介します。アコーディオンメニューは、コンテンツをクリックすることで展開・折りたたみが可能なUIの一つで、情報を効果的に整理して表示するのに非常に便利です。では、早速見ていきましょう！

jQueryの導入
HTMLの構造を作成
CSSでスタイリング
jQueryでインタラクションを実装
サンプル
1. セクション1
2. セクション2
まとめ

jQueryの導入

まずは、プロジェクトにjQueryを導入します。以下のコードをHTMLファイルの<head>タグ内に挿入してください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

これで、jQueryの機能がプロジェクトで利用可能になります。

HTMLの構造を作成

アコーディオンの基本的な構造をHTMLで作成します。ここでは、<div>タグを使ってアコーディオンの各セクションを定義します。

<div class="accordion">
  <div class="accordion-item">
    <h3 class="accordion-title">セクション1</h3>
    <div class="accordion-content">
      <p>セクション1の内容です。</p>
    </div>
  </div>

  <div class="accordion-item">
    <h3 class="accordion-title">セクション2</h3>
    <div class="accordion-content">
      <p>セクション2の内容です。</p>
    </div>
  </div>

  <!-- 他のセクションもこのように追加 -->
</div>

CSSでスタイリング

次に、アコーディオンの見た目を整えるためのCSSを設定します。ここでは、シンプルで読みやすいスタイルを目指します。

.accordion-item {
  margin-bottom: 10px;
}

.accordion-title {
  background-color: #f1f1f1;
  cursor: pointer;
  padding: 10px;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

.accordion-content {
  display: none;
  padding: 10px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  overflow: hidden;
}

このスタイル設定により、accordion-contentの初期状態は非表示となり、accordion-titleをクリックすることで展開します。

jQueryでインタラクションを実装

最後に、jQueryを使ってアコーディオンの動作を設定します。次のコードは、タイトル部分をクリックすると関連するコンテンツがスライドダウン/スライドアップで開閉する動作を実装します。

$(document).ready(function(){
  $(".accordion-title").click(function(){
    $(this).next(".accordion-content").slideToggle();
    $(".accordion-content").not($(this).next()).slideUp();
  });
});