ARTICLE AD BOX
I'm using bootstrap's collapse component but it refuses to retract when I try to trigger that exact event. It is stuck in "collapsing" state and goes back to adding "show" class to the collapse element...
Here's what it looks like in real time:
Here's the HTML code:
<!-- Button to trigger collapse element --> <button id="hrLangSwitchBtn" type="button" class="header-lang-switch-btn bg-gradient btn btn-lg rounded-5 fs-4 shadow-sm d-flex flex-row align-items-center gap-1" role="button" title="Change Site Language" data-bs-toggle="collapse" data-bs-target="#headerLangOptionsCollapse" aria-expanded="false" aria-controls="headerLangOptionsCollapse"> <i class="bi bi-translate text-black fw-bold"></i> </button> <!-- Actual collapse element --> <div class="collapse position-absolute" id="headerLangOptionsCollapse"> <div class="card card-body rounded-5 bg-gradient p-0"> <div class="d-flex flex-row align-items-center justify-content-center gap-2 w-100 rounded-pill p-1"> <button class="btn btn-sm btn-secondary-subtle flex-grow-1 fs-5 fw-medium rounded-pill text-black d-flex p-0 gap-2 flex-row align-items-center justify-content-center"> <component-lazy-image class="img-fluid" src="../assets/images/static/svg/flags/uk.svg" alt="British Flag" width="32" height="32"> </component-lazy-image> English </button> <button class="btn btn-sm btn-secondary-subtle flex-grow-1 fs-5 fw-medium rounded-pill text-black d-flex p-0 gap-2 flex-row align-items-center justify-content-center"> <component-lazy-image class="img-fluid" src="../assets/images/static/svg/flags/tr.svg" alt="Turkish Flag" width="32" height="32"> </component-lazy-image> Türkçe </button> </div> </div> </div>Am I missing something? I actually tried the JavaScript way as the docs say but I'm unable to retract this element back to its original hidden form.
I'm using webpack, custom web components with light dom (there is no shadow dom here) and typescript.
