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

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

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();
  });
});

サンプル

見出しをクリックすると開閉します.

セクション1

セクション1の内容です。

セクション2

セクション2の内容です。

まとめ

以上で、jQueryを使用してシンプルなアコーディオンを作成する基本的な手順をご紹介しました。HTMLで基本の構造を作り、CSSで見た目を整え、最後にjQueryで動作を設定する、という一連の流れを理解していただければと思います。

これをベースに、さらなるカスタマイズを加えて、自分だけのオリジナルなアコーディオンメニューを作成してみてください。例えば、開いた時にアイコンが変わるようにしたり、アニメーションの速度を調整したりすることが可能です。