結論）Bootstrapのバージョンにより、必要なCSS・JSのバージョンが異なる & タグの属性漏れチェック
BootstrapのCollapse等の動作不具合について、公式Webサイトのドキュメントのサンプルスクリプトが動作しない場合、原因として、BootstrapのCSS、JSが正確に読み込まれていない場合があります。
今回の場合は、過去の案件よりテンプレートなどをコピーしてきた場合、古いバージョンのBootstrapの設定となっていました。
【確認-1】Bootstrapの使用バージョンに合わせた、下記ファイルが読み込まれているかを確認してみてください。
- bootstrap.min.css
- popper.min.js
- bootstrap.bundle.min.js
【確認-2】<a>タグで実装する場合、下記を必須記述
<a data-bs-toggle=”collapse” href=”#_TARGET_ID_” role=”button” aria-expanded=”false” aria-controls=”_TARGET_ID_”> …. </a>
【確認-3】開閉側のコンテンツは以下記述
<div class=”collapse” id=”_TARGET_ID_”> ….. </div>