質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

3820閲覧

Bootstrap 5 にて複数のアコーディオンを設置した際の開く/折りたたむ動作を統一したい

feijor

総合スコア7

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2021/08/10 06:39

編集2021/08/10 06:41

前提・実現したいこと

複数のアコーディオンの開く/閉じる動作を統一させたい。

こんにちは。
Bootstrap 5のアコーディオンを実装しているのですが、公式(https://getbootstrap.jp/docs/5.0/components/accordion/)のアコーディオンの動作は、

・Button「Accordion Item #1」をクリックすると開く ・他のButtonをクリックすると、「Accordion Item #1」は閉じる

つまり1つのブロックに対して1つしか表示されない仕様になっているかと思うのですが、複数のブロックを実装した際、

・Button「Accordion Item #4」をクリックすると開く ・他のButtonをクリックしても「Accordion Item #4」は閉じない

という動作になってしまいます。
どちらでも良いので動作を統一させたいのですが、良い方法をご存知でしょうか。

よろしくお願いいたします。

該当のソースコード(サンプル)

//Accordion1 <div class="accordion" id="accordionExample"> <div class="accordion-item"> <h2 class="accordion-header" id="heading1"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="false" aria-controls="collapse1"> Accordion Item #1 </button> </h2> <div id="collapse1" class="accordion-collapse collapsed" aria-labelledby="heading1" data-bs-parent="#accordionExample"> <div class="accordion-body"> 内容1 </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="heading2"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapse2"> Accordion Item #2 </button> </h2> <div id="collapse2" class="accordion-collapse collapse" aria-labelledby="heading2" data-bs-parent="#accordionExample"> <div class="accordion-body"> 内容2 </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="heading3"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3" aria-expanded="false" aria-controls="collapse3"> Accordion Item #3 </button> </h2> <div id="collapse3" class="accordion-collapse collapse" aria-labelledby="heading3" data-bs-parent="#accordionExample"> <div class="accordion-body"> 内容3 </div> </div> </div> </div> //Accordion2 <div class="accordion" id="accordionExample"> <div class="accordion-item"> <h2 class="accordion-header" id="heading4"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse4" aria-expanded="false" aria-controls="collapse4"> Accordion Item #4 </button> </h2> <div id="collapse4" class="accordion-collapse collapsed" aria-labelledby="heading4" data-bs-parent="#accordionExample"> <div class="accordion-body"> 内容4 </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="heading5"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse5" aria-expanded="false" aria-controls="collapse5"> Accordion Item #5 </button> </h2> <div id="collapse5" class="accordion-collapse collapse" aria-labelledby="heading5" data-bs-parent="#accordionExample"> <div class="accordion-body"> 内容5 </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="heading6"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse6" aria-expanded="false" aria-controls="collapse6"> Accordion Item #6 </button> </h2> <div id="collapse6" class="accordion-collapse collapse" aria-labelledby="heading6" data-bs-parent="#accordionExample"> <div class="accordion-body"> 内容6 </div> </div> </div> </div>

イメージ説明

試したこと

他機能のJSやCSSが干渉していないか見直す等

補足情報(FW/ツールのバージョンなど)

bootstrap@5.0.0-beta2
Googleスプレッドシート on Google Apps Scriptにて実装

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yuki84web

2021/08/10 12:16

id="accordionExample"が重複していますので、まずはそれを直してみてください。
feijor

2021/08/13 00:50

当方レスポンスが遅くなってしまい、大変申し訳ございません。 ご指摘頂いた通り修正しましたところ、動作の統一が確認できました!(ちなみに複数開くようになりました。) こちらの質問は解決済みとさせて頂きます。 アドバイス頂きありがとうございました!
feijor

2021/08/13 01:09

もしよろしければ解決済みにさせて頂きたいので、回答としてご投稿頂ければ幸いです。 お手数でしたらこのままクローズさせて頂きます。
guest

回答1

0

ベストアンサー

idの重複を解決する

html

1<div class="accordion" id="accordionExample1"></div> 2<div class="accordion" id="accordionExample2"></div>

投稿2021/08/15 04:45

yuki84web

総合スコア1857

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問