【jQuery】アコーディオンで開くよくある質問（FAQ）

ウェブデザインの世界は日々進化していますが、特にアコーディオン式のデザインはその変動性と実用性から、多くのウェブサイトで採用されています。この記事では、jQueryを使ってアコーディオンメニューを簡単に実装する方法をステップバイステップで解説します。

アコーディオンとは？
HTML
CSSスタイル
jQueryスクリプト
jQueryライブラリの追加
まとめ

アコーディオンとは？

アコーディオンは、コンテンツをクリックやタッチで展開・折りたたみができるインタラクティブな要素です。特にFAQセクションやメニュー、情報の多いページでの利用が見られます。

HTML

まず、アコーディオンのHTML構造を用意します。

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-title">質問1</div>
    <div class="accordion-content">答え1</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-title">質問2</div>
    <div class="accordion-content">答え2</div>
  </div>
  <!-- 他の質問と答えを追加できます -->
</div>

CSSスタイル

次に、基本的なスタイルを設定します。

.accordion-content {
  display: none;
}
.accordion-title {
  cursor: pointer;
}

jQueryスクリプト

jQueryを使用してアコーディオンの動作を制御します。

$(document).ready(function(){
  $('.accordion-title').click(function(){
    var content = $(this).next('.accordion-content');

    // 他のすべてのコンテンツを閉じる
    $('.accordion-content').not(content).slideUp();
    
    // クリックされたタイトルの隣のコンテンツをスライド表示
    content.slideToggle();
  });
});

jQueryライブラリの追加

忘れずに、HTMLファイルの<head>タグの中に以下のコードを追加して、jQueryライブラリを読み込んでください。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

以上の手順を組み合わせることで、jQueryを使用したアコーディオン式のFAQセクションを作成することができます。

まとめ

アコーディオンは、情報を効果的に表示するための強力なツールです。この記事を参考に、あなたのウェブサイトにもアコーディオンを取り入れてみてください！