I am looking to collapse my Bootstrap 5 navigation when the window resizes in the same way it opens or 'shows' by default. But the only solution I can figure out is to remove the 'show' class on that div with window resize. It works, but the div just closes instantly instead of animates collapsing similar to how it opens by default.

html

<nav class="navbar navbar-expand-md navbar-light position-absolute" role="navigation">
            
<button
    class="navbar-toggler collapsed" 
    type="button" 
    data-bs-toggle="collapse" 
    data-bs-target="#bs-navbar-collapse" 
    aria-controls="navbarToggleExternalContent" 
    aria-expanded="false"
    aria-label="Toggle navigation">
    <span class="toggler-icon top-bar"></span>
    <span class="toggler-icon middle-bar"></span>
    <span class="toggler-icon bottom-bar"></span>
</button>

<div class="collapse navbar-collapse" id="bs-navbar-collapse">
    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
        <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        .... links ...
        </li>
    </ul>
</div>

</nav>

js

$(document).ready(function() { 
  $(window).resize(function() {
    $("#bs-navbar-collapse").removeClass("show"); 
  });
});