English 中文 العربية 日本語 Português

Bootstrap: アコーディオンと折りたたみパネル

最終更新：2026-08-26

1. レッスンの紹介

(1) 前提条件

(2) 🎯 学習内容

(3) 課題点

ボブは8つのよくある質問からなるFAQページを構築しています。彼はこれをAccordionを使って実装したいと考えています。ユーザーが質問をクリックすると回答が展開され、別のものをクリックすると自動的に前のものが折りたたまれ、スムーズな体験を提供し、ページのスペースを節約したいです。

(4) 解決策

Collapseコンポーネントは、限られたスペースに大量のコンテンツを表示するために使用されます。ユーザーはタイトルをクリックして詳細を表示し、再度クリックして非表示にします。Accordionは、Collapseコンポーネントの特殊な形式です。一度に1つのパネルだけが開いた状態になります。

理解のポイント: アコーディオンは折りたたみ可能な引き出しのセットのようなもので、一度に1つの引き出ししか引き出せません。Collapseは1つの引き出しであり、Accordionは複数の引き出しがリンクされたものです。

(5) 利点

アコーディオンを使用することで、限られたスペース内に大量のコンテンツを整理し、ページをすっきりさせ、閲覧体験を向上させることができます。

2. 単一の折りたたみパネル

最も基本的なCollapseコンポーネントです。

HTML 
<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample">
    Toggle content
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    This content is hidden by default. Click the button to show or hide it.
  </div>
</div>
▶ 試してみよう

出力: Bootstrap 5.3のスタイルが適用されたコンポーネント（ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。

▶ サンプル 基本的な折りたたみパネル

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Collapse Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <p>
      <a class="btn btn-primary" data-bs-toggle="collapse" href="#singleCollapse" role="button">
        Toggle with link
      </a>
      <button class="btn btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#singleCollapse">
        Toggle with button
      </button>
    </p>
    <div class="collapse" id="singleCollapse">
      <div class="card card-body">
        This content can be toggled using either the link or the button.
      </div>
    </div>

    <hr>

    <p>
      <button class="btn btn-success" data-bs-toggle="collapse" data-bs-target=".multi-collapse">
        Toggle both
      </button>
    </p>
    <div class="row">
      <div class="col">
        <div class="collapse multi-collapse" id="multiCollapse1">
          <div class="card card-body">First collapsible panel.</div>
        </div>
      </div>
      <div class="col">
        <div class="collapse multi-collapse" id="multiCollapse2">
          <div class="card card-body">Second collapsible panel.</div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
▶ 試してみよう

出力: Bootstrap 5.3のスタイルが適用されたコンポーネント（ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。

(1) Collapseの主要属性

属性/クラス 説明
data-bs-toggle="collapse" トリガーを宣言します
data-bs-target="#id" 折りたたむ対象の要素を指定します
class="collapse" デフォルトで非表示
class="collapse show" デフォルトで表示（展開状態）
data-bs-parent="#accordion" リンクされた制御（Accordion用）

3. Accordion

Accordionは複数の折りたたみパネルのリンクされた組み合わせで、最大で1つだけ展開できます。

HTML 
<div class="accordion" id="faqAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse"
              data-bs-target="#faq1">
        How do I install Bootstrap?
      </button>
    </h2>
    <div id="faq1" class="accordion-collapse collapse show"
         data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        Add the CDN link to your HTML head.
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#faq2">
        Does Bootstrap need jQuery?
      </button>
    </h2>
    <div id="faq2" class="accordion-collapse collapse"
         data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        No, Bootstrap 5 uses vanilla JavaScript.
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#faq3">
        What is the grid system?
      </button>
    </h2>
    <div id="faq3" class="accordion-collapse collapse"
         data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        Bootstrap uses a 12-column flexbox grid system.
      </div>
    </div>
  </div>
</div>
▶ 試してみよう

出力: Bootstrap 5.3のスタイルが適用されたコンポーネント（ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。

(1) Accordionの構造

要素 クラス 説明
コンテナ accordion アコーディオングループを宣言
アイテム accordion-item 単一の折りたたみパネル
ヘッダー accordion-header ヘッダー行のコンテナ
トリガー accordion-button クリック可能なタイトルボタン
コンテンツエリア accordion-collapse collapse 折りたたみ可能なコンテンツ
コンテンツ本文 accordion-body 実際に表示されるテキスト

(2) 主要なメカニズム

HTML 
data-bs-parent="#faqAccordion"  // リンクされた（一度に1つだけ開く）
class="accordion-collapse collapse show"  // デフォルトで展開
class="accordion-button collapsed"  // 折りたたみ状態
▶ 試してみよう

出力: Bootstrap 5.3のスタイルが適用されたコンポーネント（ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。

4. Accordionのバリエーション

HTML 
<!-- Flush (外枠なし) -->
<div class="accordion accordion-flush">
  <div class="accordion-item">...</div>
</div>

<!-- 常に開いたモード (data-bs-parent を削除) -->
<div class="accordion" id="multiOpen">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#panel1">
        Panel 1
      </button>
    </h2>
    <!-- data-bs-parent なし — 独立している -->
    <div id="panel1" class="accordion-collapse collapse show">
      <div class="accordion-body">This panel stays open when Panel 2 is opened.</div>
    </div>
  </div>
</div>
▶ 試してみよう

出力: Bootstrap 5.3のスタイルが適用されたコンポーネント（ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。

5. その他の折りたたみパネルの例

▶ サンプル FAQアコーディオン（ボーダーなし）

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FAQ Accordion</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <div class="accordion accordion-flush" id="faqAccordion">
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
            What is Bootstrap?
          </button>
        </h2>
        <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
          <div class="accordion-body">Bootstrap is a free front-end framework for building responsive websites with HTML, CSS, and JavaScript.</div>
        </div>
      </div>
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
            Do I need to know JavaScript?
          </button>
        </h2>
        <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
          <div class="accordion-body">Basic Bootstrap components work without JS. Interactive components like modals and carousels need Bootstrap JS.</div>
        </div>
      </div>
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
            Is Bootstrap free?
          </button>
        </h2>
        <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
          <div class="accordion-body">Yes, Bootstrap is completely free and open-source under the MIT license.</div>
        </div>
      </div>
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq4">
            What is the grid system?
          </button>
        </h2>
        <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
          <div class="accordion-body">Bootstrap's grid uses 12 columns with breakpoints for responsive layouts. Classes like col-md-6 create columns that adjust at different screen sizes.</div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
▶ 試してみよう

出力: Bootstrap 5.3のスタイルが適用されたコンポーネント（ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。

▶ サンプル 常に開いたモード（独立したパネル）

HTML 
<div class="accordion" id="independentAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelA">
        Skills & Expertise
      </button>
    </h2>
    <div id="panelA" class="accordion-collapse collapse show">
      <div class="accordion-body">HTML, CSS, JavaScript, Bootstrap, React</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelB">
        Work Experience
      </button>
    </h2>
    <div id="panelB" class="accordion-collapse collapse show">
      <div class="accordion-body">Senior Developer at TechCorp (2020-present), Frontend Developer at WebStudio (2018-2020)</div>
    </div>
  </div>
</div>
▶ 試してみよう

出力: Bootstrap 5.3のスタイルが適用されたコンポーネント（ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。

▶ サンプル 独立したCollapseコンポーネント

HTML 
<div class="container py-4">
  <div class="d-flex gap-2 mb-3">
    <button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#demo1">
      Toggle First
    </button>
    <button class="btn btn-outline-success" data-bs-toggle="collapse" data-bs-target="#demo2">
      Toggle Second
    </button>
    <button class="btn btn-outline-danger" data-bs-toggle="collapse" data-bs-target=".multi-demo">
      Toggle All
    </button>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="collapse multi-demo show" id="demo1">
        <div class="card card-body">
          First panel — visible by default.
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="collapse multi-demo" id="demo2">
        <div class="card card-body">
          Second panel — initially hidden.
        </div>
      </div>
    </div>
  </div>
</div>
▶ 試してみよう

出力: Bootstrap 5.3のスタイルが適用されたコンポーネント（ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。

▶ サンプル カード内の折りたたみパネル

HTML 
<div class="card" style="max-width: 500px;">
  <div class="card-header bg-primary text-white">
    <h5 class="mb-0">Order Summary</h5>
  </div>
  <div class="card-body">
    <p class="card-text">Your order contains 3 items.</p>
    <p>
      <a class="btn btn-sm btn-outline-primary" data-bs-toggle="collapse" href="#orderDetails">
        View Details
      </a>
    </p>
    <div class="collapse" id="orderDetails">
      <div class="border rounded p-3 bg-light">
        <div class="d-flex justify-content-between mb-2">
          <span>Wireless Mouse</span><span class="text-muted">$29.99</span>
        </div>
        <div class="d-flex justify-content-between mb-2">
          <span>USB-C Hub</span><span class="text-muted">$39.99</span>
        </div>
        <div class="d-flex justify-content-between">
          <span>Mouse Pad</span><span class="text-muted">$12.99</span>
        </div>
        <hr>
        <div class="d-flex justify-content-between fw-bold">
          <span>Total</span><span>$82.97</span>
        </div>
      </div>
    </div>
  </div>
</div>
▶ 試してみよう

出力: Bootstrap 5.3のスタイルが適用されたコンポーネント（ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。

(1) Collapse/Accordionの動作原理

100% 
flowchart TD
    A[トリガー<br/>data-bs-toggle=collapse] --> B[data-bs-target=#id]
    B --> C[ターゲット要素<br/>class=collapse]
    C --> D{初期状態}
    D -->|show なし| E[デフォルトで非表示]
    D -->|show あり| F[デフォルトで展開]
    C --> G{data-bs-parent があるか？}
    G -->|はい| H[リンクモード<br/>一度に1つだけ開く]
    G -->|いいえ| I[独立モード<br/>個別に切り替え]
    H --> J[Accordion]
    I --> K[通常のCollapse]

出力: Bootstrap 5.3のスタイルが適用されたコンポーネント（ボタン、カード、カルーセル、折りたたみなど）。ページはデフォルトでBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。

Collapse クラス 効果 説明
collapse デフォルトで非表示 ページ読み込み時に表示されない
collapse show デフォルトで展開 ページ読み込み時に表示される
collapsing トランジション中 アニメーション中に自動的に追加
accordion-collapse Accordion専用 アコーディオン内で使用
data-* 属性 値 目的
data-bs-toggle collapse 折りたたみトリガーを宣言
data-bs-target #id / .class 制御対象の要素を指定
data-bs-parent #accordionId リンク制約（アコーディオン）
href #id リンクタイプのトリガー
Accordion バリエーション クラス 特徴 シナリオ
基本 accordion 標準ボーダー 一般的な使用
ボーダーなし accordion-flush 外枠/角丸なし FAQ、サイドバー
常に開いた data-bs-parent を削除 複数パネルが同時に展開可能 設定パネル
カード内にネスト card-body 内に配置 コンパクトなレイアウト 注文詳細

❓ よくある質問

Q AccordionとCollapseの違いは何ですか？
A Collapseは基本コンポーネントで、単一要素の展開/折りたたみを制御します。AccordionはCollapseの組み合わせ応用で、複数のパネルがdata-bs-parentでリンクされ、一度に1つだけ展開できるようになっています。
Q Accordionのタイトルをクリックしても矢印アイコンが回転しません。なぜですか？
A これは、Bootstrap JSが正しく読み込まれていない可能性が高いです。bootstrap.bundle.min.jsが含まれていることを確認してください。ブラウザのコンソールでJSエラーがないか確認してください。
Q 自動折りたたみ動作なしで、Accordionの最初のパネルをデフォルトで展開するにはどうすればよいですか？
A data-bs-parent属性を単に削除してください。这样一来、各パネルは独立して動作し、他のパネルに影響を与えなくなります。
Q Accordionの中にチェックボックスや入力フィールドを配置できますか？
A はい。accordion-body内には、フォームコントロールを含む任意のHTMLを配置できます。入力をクリックした際に誤ってアコーディオンの展開/折りたたみをトリガーしないように注意してください。イベントの伝播を防ぐにはevent.stopPropagation()を使用できます。
Q Accordionはキーボードナビゲーションをサポートしていますか？
A はい。BootstrapのAccordionはキーボードインタラクションを実装しています。Tabキーでパネル間のフォーカスを切り替え、Enter/スペースキーで現在のパネルを展開し、展開されたパネルで再度Enter/スペースキーを押すと折りたたみます。

📖 まとめ

📝 練習問題

  1. ⭐ FAQアコーディオンを作成: 少なくとも5つのよくある質問、最初のものはデフォルトで展開、他は折りたたまれている、ボーダーなしのaccordion-flushスタイルを使用。
  2. ⭐⭐ 宿題の回答をAccordionを使って実装 – 各質問をパネルとし、クリックで回答を表示。
  3. ⭐⭐⭐ サイドバーのナビゲーションアコーディオンを作成: ダッシュボード（サブアイテムなし）、製品（3つのサブアイテム）、注文（2つのサブアイテム）、設定（4つのサブアイテム）を含む。

前のレッスン: アラートコンポーネント · 次のレッスン: Bootstrapアイコン

Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%