事情是這樣的，我把header以及footer另外寫成html檔案
再用load導入頁面的指定區域當中

然後....
我的collapse就無法收合了

這是還沒點開的畫面

這是點開但收不回去的畫面:(

想請問大大我該怎麼解決這樣的問題

附上程式碼
Html

<div class="container">
        <div class="row">
            <!--Header-->
            <div class="headerpage"></div>
            <!--/Header -->
            <div>
                <p>
                  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                    Link with href
                  </a>
                  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                    Button with data-bs-target
                  </button>
                </p>
                <div class="collapse" id="collapseExample">
                  <div class="card card-body">
                    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
                  </div>
                </div>
            </div>
            <!--Footer-->
            <div class="footerpage"></div>
            <!--/Footer -->
        </div>
    </div>

Javascript

$(function(){
    $(".headerpage").load("header.html");
    $(".footerpage").load("footer.html");
});