こんにちは。
はじめてBootstrapに触ってみたのですが、
うまくアコーディオンに動きが付けれなくて困っています。
調べてみたのですが、該当するようなものが見つかりません(わかりません)でした。
どうかお力を貸していただけないでしょうか?
前提・実現したいこと
Bootstrap5のアコーディオンの項目にて、矢印を押すと開閉できる動きを実装したい。
発生している問題・エラーメッセージ
エラーはなし
該当のソースコード
アコーディオンの項目のコードをそのままコピー&ペースト
HTML
1<div class="accordion" id="accordionExample"> 2 <div class="accordion-item"> 3 <h2 class="accordion-header" id="headingOne"> 4 <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 5 アコーディオン・アイテム #1 6 </button> 7 </h2> 8 <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> 9 <div class="accordion-body"> 10 <strong>これが最初のアイテムのアコーディオン本体。</strong>... 11 </div> 12 </div> 13 </div> 14 <div class="accordion-item"> 15 <h2 class="accordion-header" id="headingTwo"> 16 <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 17 アコーディオン・アイテム #2 18 </button> 19 </h2> 20 <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"> 21 <div class="accordion-body"> 22 <strong>これは2番目のアイテムのアコーディオン本体。</strong> 23 </div> 24 </div> 25 </div> 26 <div class="accordion-item"> 27 <h2 class="accordion-header" id="headingThree"> 28 <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 29 アコーディオン・アイテム #3 30 </button> 31 </h2> 32 <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample"> 33 <div class="accordion-body"> 34 <strong>これは3番目のアイテムのアコーディオン本体。</strong> 35 </div> 36 </div> 37 </div> 38</div>
試したこと
説明には「.accordionに.openクラスを追加」と書かれていたので、
cssファイルの作成や
html
1div class= open
なども追記してみたのですが、うまくいきませんでした。
補足情報(FW/ツールのバージョンなど)
Bootstrap5
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2021/02/26 10:45