(Sample)
以下は、Bootstrap 5 のアコーディオン (Accordion) 機能を使用するサンプルの HTML ページのコードです。
アコーディオンとは楽器のアコーディオンと同様に蛇腹式で開いたり閉じたりするコンポーネントです。
アコーディオンは、複数のセクションを折りたたむことができる UI 要素です。各セクションは個別に展開または折りたたむことが可能で、一度に1つのセクションだけを表示することもできます。
ポイントは以下のクラスです。
class="accordion-collapse collapse show"
collapse showというクラスが付けられた要素は、ページが読み込まれたときにすぐに表示（展開）されます。collapseというクラスがBootstrapのアコーディオンにおいて、アイテムの開閉（折りたたみと展開）を制御します。そして、showというクラスはアイテムを開いた状態にするものです。
逆に、最初から非表示（折りたたまれている）にしたい場合は、collapseのみを指定します。その結果、ページが読み込まれたときにそのアイテムは折りたたまれた状態になり、ユーザーがヘッダー部分をクリックしたときに初めて展開します。
なお、このcollapseとshowのクラスは、JavaScriptによって動的に切り替えられ、ユーザーがアコーディオンを操作するたびに更新されます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Bootstrap 5 Accordion サンプル</title>
</head>
<body>
<div class="container py-5">
<p><a href="#" onClick="window.close(); return false;">このウィンドウを閉じる</a></p>
</div>
<div class="container py-5">
<h1>Bootstrap 5 Accordion サンプル</h1>
<div class="accordion" id="accordionExample">
<!-- アコーディオンコンポーネントの開始。この要素内にあるアイテムがアコーディオンとして動作します -->
<div class="accordion-item">
<!-- 1つ目のアコーディオンアイテム -->
<h2 class="accordion-header" id="headingOne">
<!-- アイテムのヘッダー -->
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<!-- アイテムを開閉するためのボタン -->
Accordion Item #1
<!-- ボタンのラベル -->
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
data-bs-parent="#accordionExample">
<!-- ① -->
<!-- ボタンを押すと展開・折りたたみされる部分 -->
<div class="accordion-body">
<!-- アイテムの内容 -->
これはAccordion Item #1の内容です。最初は開いています。
<!-- アイテムの内容を記述します -->
</div>
</div>
</div> <!-- 1つ目のアコーディオンアイテムの終了 -->
<div class="accordion-item">
<!-- 2つ目のアコーディオンアイテム -->
<h2 class="accordion-header" id="headingTwo">
<!-- アイテムのヘッダー -->
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<!-- アイテムを開閉するためのボタン -->
Accordion Item #2
<!-- ボタンのラベル -->
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
data-bs-parent="#accordionExample">
<!-- ボタンを押すと展開・折りたたみされる部分 -->
<div class="accordion-body">
<!-- アイテムの内容 -->
これはAccordion Item #2の内容です。最初は閉じています。
<!-- アイテムの内容を記述します -->
</div>
</div>
</div> <!-- 2つ目のアコーディオンアイテムの終了 -->
</div> <!-- アコーディオンコンポーネントの終了 -->
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>以上、アコーディオンをご紹介しました。