Bootstrap5｜JavaScriptコンポーネント「アコーディオン」を使ってみた

記事

コラム

2026/07/26 13:44

はじめに

Bootstrap には、見た目の調整だけでなく、動きを簡単に実装できる JavaScript コンポーネントが数多く用意されています。その中でも「アコーディオン（Accordion）」は、クリック操作によってコンテンツの表示・非表示を切り替えられる便利な UI です。本記事では、Bootstrap5 のアコーディオンについて概要を整理し、基本的な使い方を実際に試した内容をまとめています。

アコーディオンとは何か

アコーディオンとは、見出しをクリックすると対応する内容が展開され、再度クリックすると折りたたまれる UI のことです。楽器のアコーディオンが伸び縮みする様子に似ていることから、この名前が付けられています。

・▶ よくある質問

・▼ よくある質問（回答が表示される）

どんな場面で活用できるのか

・FAQ（よくある質問）

・サービス紹介ページ

・スマートフォン向けメニュー

・商品説明

基本的な実装方法

Bootstrap の CSS と JavaScript を読み込みます。

その後、アコーディオン用の HTML を記述します。

<button

class="accordion-button"

type="button"

data-bs-toggle="collapse"

data-bs-target="#collapseOne">

サービス内容

</button>

</h2>

<div

id="collapseOne"

class="accordion-collapse collapse show"

data-bs-parent="#sampleAccordion">

当サービスでは Web サイト制作を提供しています。

</div>

デモ画面

※ココナラのブログでは外部の CSS / JavaScript を読み込めないため、

Bootstrap のアコーディオンは表示・非表示動作しません。

画像は静止表示になりますが、コード自体はそのまま利用できます。

実際に触ってみて感じたこと

実際に試してみると、少ないコード量で実装できる点が非常に便利だと感じました。これまで JavaScript で開閉処理を実装しようとすると、

・クリックイベントの設定

・表示・非表示の切り替え

・アニメーション制御

などを自分で作り込む必要がありました。しかし Bootstrap のアコーディオンを利用すると、HTML に必要なクラスや属性を追加するだけで動作します。また、スマートフォン表示との相性も良く、限られた画面スペースを有効活用できる点も魅力です。 FAQ ページやサービス紹介ページなど、ポートフォリオサイトでも活用できそうだと感じました。

まとめ

今回は Bootstrap5 の JavaScript コンポーネント「アコーディオン」を試してみました。アコーディオンには次のような特徴があります。

・コンテンツの表示・非表示を切り替えられる

・画面をすっきり見せられる

・FAQ やサービス紹介との相性が良い

・少ないコード量で実装できる

・Bootstrap だけで簡単に利用できる

実際の Web サイトでもよく利用されているため、Bootstrap を学習している方は一度試してみると理解が深まると思います。

#Webデザイン